Home

CSS Examples Dashed Vertical Menu

Date: 05/15/2005 Dashed Vertical Menu

Author:

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;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

#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;
width:160px;
}

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

</style>

The HTML:

<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<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>
</ul>
</div>

Comments (42)

great tutorial - Im gonna improve

#1: Webgirl on 08/31 at 09:49 PM

Nice. Clean. Simple. This Rocks.

Thanks much for the tips!
dave

#2: dwm on 02/07 at 03:35 PM

I tried to put a definite height for each link then when I checked it in IE, it has some extra space/margin between them?

#3: fatfingur on 02/14 at 01:05 PM

cool, it's really nice and clean

#4: green_acid on 02/26 at 01:43 PM

very good and flexible...because it made from rubber...

#5: Korkularımız on 03/03 at 07:05 AM

Really great menu, simple but elegant.

#6: NeboN on 03/26 at 12:10 AM

Good tutorial ;)

#7: Alberto Lucas on 04/13 at 02:15 PM

Thats really good and helpful for liquid stuff. i enjoy it..thanx..great.

#8: chintu on 04/27 at 03:43 PM

It's work with firework.it doesn't work with IE.

#9: teno on 04/28 at 05:14 AM

very nice job..

#10: waqas on 05/07 at 11:09 AM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


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