Css+div Design Example: Super Cool vertical navigation bar

css| Design HTML:

The following is a reference fragment: <div id= "Navcontainer" > <ul id= "Navlist" > <li id= "Active" ><a href= "#" id= "current" >item <ul id= "Subnavlist" > <li id= "subactive" ><a href= "#" id= "subcurrent" >subitem one</a></li> <li><a href= "#" >subitem two</a></li> <li><a href= "#" >subitem three</a></li> <li><a href= "#" >subitem four</a></li> </ul> </li> <li><a href= "#" >item two</a></li> <li><a href= "#" >item three</a></li> <li><a href= "#" >item four</a></li> </ul> </div>

CSS:

The following is a reference fragment: #navcontainer {margin-left:30px;} #navcontainer ul { margin:0; padding:0; List-style-type:none; Font-family:verdana, Arial, Helvetica, Sans-serif; } #navcontainer li {margin:0;} #navcontainer A { Display:block; padding:5px 10px; width:140px; Color: #000; Background-color: #ADC1AD; Text-decoration:none; border-top:1px solid #fff; border-left:1px solid #fff; border-bottom:1px solid #333; border-right:1px solid #333; Font-weight:bold; Font-size:. 8em; Background-image:url (images/vertical06.jpg); Background-repeat:no-repeat; background-position:0 0; } #navcontainer a:hover { Color: #000; Background-color: #889E88; Text-decoration:none; border-top:1px solid #333; border-left:1px solid #333; border-bottom:1px solid #fff; border-right:1px solid #fff; Background-image:url (images/vertical06a.jpg); Background-repeat:no-repeat; background-position:0 0; } #navcontainer ul ul li {margin:0;} #navcontainer ul ul a { Display:block; padding:5px 5px 5px 30px; width:125px; Color: #000; Background-color: #C5D8C5; Text-decoration:none; Font-weight:normal; } #navcontainer ul ul a:hover { Color: #000; Background-color: #889E88; Text-decoration:none; }

About the CODE
Some lists within the Listamatic site had to is modified so this they could work on listamatic ' s simple list model. When in doubt, use the external resource-a-least compare both models to the which one suits your.

View Effects