CSS Examples Dashed Vertical Menu

Date: 05/15/2005 Dashed Vertical Menu


A simple yet elegant list based vertical menu. Move the mouse over a link, and the link area changes color. A thin dashed border follows each menu item.

The CSS:

<style type="text/css">

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;

#vertmenu h1 {
display: block;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
#vertmenu ul li {
margin: 0px;
padding: 0px;
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;



<div id="vertmenu">
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>

Comments (42)

Love it! I had a really boring horrible CSS nav section on my site, and then adapted this one and i love it to pieces people have been comenting on it so much!

#1: Steph on 06/25 at 11:43 AM

Hi, how can i apply this css in my website: http://www.acompostela.com

#2: Acompostela on 07/30 at 04:42 PM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site