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)

Sorry. The code I posted is missing an opening javascript tag. For some reason, that part of the code was not allowed in my post. The opening javascript tag should go below the

and above the sfHover = function(){

Of course the tag should say:

script type="text/javascript"

but with the <> brackets.

#1: dalek on 11/16 at 02:48 PM

very neat :)

#2: rlg on 12/01 at 07:11 AM

Good stuff, it is easy to customize to fit my needs. Thanks CSS Drive

#3: Sith Kong on 12/07 at 04:43 AM

Thank you for this menu. It is great! I have a question on how it can be modified to have the background of the active page be a different color and remain that color until they change pages? That way the user will have a visual clue as to which page they are on. Right now, the background color only changes when the links are highlighted. Thank you for your time.

#4: Goldberg on 02/13 at 07:21 PM

Yes I like it, very nice and short code

#5: Loops on 03/20 at 06:25 PM

It's really cool. Do you know how I can put a text article on the right of it. I can only get it to show under it.

#6: Micah Stockton on 04/13 at 06:28 PM

this is really good actually.

#7: safertr on 07/28 at 07:37 AM

Thanks, the Dashed Vertical Menu is everytime a good standard menu for little pages...

#8: Guido on 08/09 at 05:15 PM

Great tutorial. For the first time I'm learning CSS and it felt so easy to learn.
Really Hats off and appreciable.

#9: Kingshuk Biswas on 08/12 at 08:18 AM

GREAT, elegant, simple, effective CSS menu. Thank you so much. I was easily able to convert it to be dynamic for my own CMS.

#10: Derrick on 09/11 at 01:15 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