CSS Examples 
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)
One good example :)
I love this CSS menu! Can i freely use it?
With kind regards
Ronny Henri
This is a refreshing menu compared to all the other straighline menu system. It would be even better if we can see a submen option too!
what a beautiful, thanks alot
Guys! Your site is great! This is something I've been looking for so long!
Thank you
worked great! thanks for the post!
it is very simple and stylish, beautiful menu.
very nice, simple and good
Nice one, i'm going to use it.
Stuart created such a nice css vertical menu, I combined his css menu with another css menu that has 3 levels and got the following. You can add in as many 1rst level menus as you like, but you can only go 3 levels deep. Just cut and paste the code below, and enjoy. Thanks Stuart.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A Thanks to Stuart</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#nav, #nav ul { /* all lists */
list-style: none;
margin: 0px;
padding: 0px;
border: none;
width : 12em;
background-color:#FFFFFF; /* Background color between the brown dashed lines */
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 12.75em; /* Moves sub menus right or left. Larger # moves right */
margin-top : -1.80em; /* Moves sub menu up or down. bigger -# higher it goes*/
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
display: block;
padding: 3px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:149px;
background-color: #FFFFFF; /* Background color of the entire menu */
border-bottom: 1px dashed #C39C4E;
}
#nav li a:hover {
color : black; /* Color of rollover font */
background-color : #eeeeee; /* Background color of rollover link */
border-bottom: 1px dashed #C39C4E;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home
<!-- -->
<li>Menu 1
<ul>
<li>Menu 1a
<ul>
<li>Menu 1a1</li>
<li>Menu 1a2</li>
<li>Menu 1a3</li>
<li>Menu 1a4</li>
<li>Menu 1a5</li>
<li>Menu 1a6</li>
<li>Menu 1a7</li>
<li>Menu 1a8</li>
<li>Menu 1a9</li>
</ul>
</li>
<li>Menu 1b</li>
</ul>
</li>
<!-- -->
<li>Menu 2
<ul>
<li>Menu 2a</li>
<li>Menu 2b</li>
<li>Menu 2c</li>
<li>Menu 2d</li>
</ul>
</li>
<!-- -->
<li>Menu 3
</li>
<!-- -->
<li>Menu 4
</li>
<!-- -->
<li>Menu 5
</li>
<!-- -->
<li>Menu 6
</li>
<!-- -->
<li>Menu 7
</li>
<!-- -->
<li>Menu 8
</li>
<!-- -->
<li>Menu 9
</li>
<!-- -->
<li>Menu 10
</li>
</ul>
</body>
</html>
