Styling Two Menus Differently (one horizontal one vertical)
Posted: 13 June 2009 08:42 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2008-12-19

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;
    
padding0.5em;
    list-
style-typenone;
    
background-color:none;
    
color#d7d7d7;
    
text-alignleft;
    
width:100%;
    
float:left;
    
height45px;
    
font-size:0.8em;
}
#navcontainer li { display: inline; }

li a {
    text
-decorationnone;
    
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-
stylenone;
    
width145px;
    
height230px;
    
text-align:left;
    
font-size:0.8em;
    
floatleft;
    
margin15px 0 0 30px;
    
color:#252525;
}
#menu ul{
    
list-stylenone;
    
margin0px;
    
padding0px;
}

#menu a:link{
    
color#252525;
    
font-familyTahoma;
    
height23px;
    
display:block;
    
text-decorationnone;
    
font-weight:normal;
}

#menu a:visited{
    
text-decorationnone;
}

#menu a:hover{
    
color#00aeef;
}

#menu a:active{
    
color#252525;
}
.current2    {
    color
#000000;
Profile
 
 
Posted: 23 June 2009 11:57 AM   [ Ignore ]   [ # 1 ]
Member
Avatar
RankRankRank
Total Posts:  52
Joined  2007-11-08

#menu ul is incorrect

it should be ul#menu

Profile