Simple CSS MenuPosted on: 13 October, 2008

A Simple XHTML/CSS rollover menu.

Tested with IE7, IE6, FireFox2, Opera 8.0

Demo:
HTML Code:

<ul id="mainmenu">
<li><a href="javascript:void(0);" >item one</a></li>
<li><a href="javascript:void(0);" >item two</a></li>
<li><a href="javascript:void(0);" >item three</a></li>
<li><a href="javascript:void(0);" >item four</a></li>
</ul>

CSS Code:

#mainmenu {
list-style-type:none;
padding:0;
margin:15px 8px;
}
#mainmenu li a:link, #mainmenu li a:active, #mainmenu li a:visited {
font-size:1em;
text-transform:capitalize;
display:block;
width:190px;
padding:6px 2px 2px 4px;
color:#A11010;
border-bottom:1px dashed #bbb;
background-color:#FEFEFE;
}
#mainmenu li a:hover {
color:#555;
text-decoration:none;
border-bottom:1px solid #AAA;
background-color:#F4F4F4;
}

Leave a comment