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)

Little too simple! Also foudn a bug in Older version of firefox.

#1: Dean on 09/16 at 08:46 PM

Love It! Thank You!!!!!!!!!!!!!!!

#2: Piper Lynn on 10/18 at 03:26 PM

what a great tut. Simple, easy to read, easy to implement. I appreciate it and I'm going to use some of it on my own pages. Thank You.

#3: Bill on 11/29 at 05:15 PM

cool but its kids stuffs

#4: mindlesswsizard on 12/11 at 05:14 AM

Yeah I really like how easy this is to understand. I work occasionally on this gamer site and changing templates is a lot easier with tutorials such as yours, thanks

#5: Nick on 02/13 at 09:18 PM

Firstly, great script.
The script was displayed on page as expected. However, I don't know why, everytime I make changes eg on the font color, font size,background color etc, the changes are not reflected. The only thing I managed to do was to bold the font.any advice? tQ

#6: iGGy on 02/20 at 08:41 AM

Hi again..forget the question before this. Found the problem. My mistake. Didn't realise my other css file superceded this css. Removing the other css file solved the problem. Still..thanks for the great script!. :P

#7: iGGy on 02/20 at 09:20 AM

is there any submenu example?

#8: sahibinden on 04/30 at 08:39 PM

Looks good! I like the dashed border.

#9: AdSense VS Chitika on 05/15 at 01:58 AM

Hi, can i impliment this code in '<td>'? or it will work in only div tags?

#10: Aravind on 06/17 at 08:37 AM
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