HTML:
Reference content is as follows:
< Div ID = "Navcontainer" >
< Ul ID = "Navlist" >
< Li ID = "Active" > < A Href = "#" ID = "Current" > Item one </ A >
< 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:
Reference content is as follows:
# 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
{
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 Li { Margin : 0 ; }
# Navcontainer ul
{
Display : Block ;
Padding : 5px 5px 5px 30px ;
Width : 125px ;
Color : #000 ;
Background-color : # C5d8c5 ;
Text-Decoration : None ;
Font-weight : Normal ;
}
# Navcontainer ul a: hover
{
Color : #000 ;
Background-color : #889e88 ;
Text-Decoration : None ;
}