css| navigation <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:
#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
