I am trying to use two menus on my page using css to style them differently.
Currently I am able to get the main navigation perfect but when I add the second menu it inherits the main navigation’s colors and doesn’t display on the light colored background. The menu works properly and is formatted to work correctly but the colors really have me stumped.
I am using different ID’s for each menu and have tried to specify classes for styling of the second, but it doesn’t take the style I set.
Obviously I’m missing something simple but just can’t seem to figure it out. Could someone take a look and tell me what I’ve missed?
My HTML seems straight forward:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="mirrors.html" >MIRRORS</a></li>
<li><a href="frames.html" id="current">FRAMES</a></li>
<li><a href="#">ART</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<ul id="menu">
<li><a href="frames_black.html" target="_self" class="current2">BLACK</a></li>
<li><a href="frames_gold.html" target="_self">GOLD</a></li>
<li><a href="frames_silver.html" target="_self">SILVER</a></li>
<li><a href="frames_unique.html" target="_self">UNIQUE</a></li>
<li><a href="frames_wood.html" target="_self">WOOD TONE</a></li>
<li><a href="frames_closed.html" target="_self">CLOSED CORNER</a></li>
</ul>
MAIN NAV CSS
#navcontainer ul {
margin:0;
padding: 0.5em;
list-style-type: none;
background-color:none;
color: #d7d7d7;
text-align: left;
width:100%;
float:left;
height: 45px;
font-size:0.8em;
}
#navcontainer li { display: inline; }
li a {
text-decoration: none;
background-color: #none;
color: #ffffff;
padding: .1em 1.5em;
}
li a:hover {
background-color: #none;
color: #00aeef;
}
li a:active {
background-color: #none;
color: #fff;
text-decoration:none
}
#current {
color:#00aeef;
}
SUB NAV
#menu {
position:relative;
list-style: none;
width: 145px;
height: 230px;
text-align:left;
font-size:0.8em;
float: left;
margin: 15px 0 0 30px;
color:#252525;
}
#menu ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#menu a:link{
color: #252525;
font-family: Tahoma;
height: 23px;
display:block;
text-decoration: none;
font-weight:normal;
}
#menu a:visited{
text-decoration: none;
}
#menu a:hover{
color: #00aeef;
}
#menu a:active{
color: #252525;
}
.current2 {
color: #000000;
}
