Horizontal + Vertical List Item problem

[departedmind]

I got a horizontal list items for menu ID - navigation and  another menu with class v-menu for drop down list. The problem is that list items of class v-menu is taking css style from ul#navigation, it has been ages and i still could not figure out... Can someone have a look....

 

ul#navigation {
height:15px;
font-family:"Univers 45 Light", "Arial";
font-size:15px; 
list-style:none;
margin:-5px 0 0 285px; 
z-index:30;
}
ul#navigation li { 
float:left; 
display:inline;
line-height:15px;
background:url(../images/nav_sep.gif) no-repeat top right;
padding:0 13px 0 13px;
}
ul#navigation li a { color:#ffffff;}
ul#navigation li a:hover { 
background:url(../images/glow.png) no-repeat center;
_background:transparent; 
behavior: url(iepngfix.htc)
}
ul#navigation li.last { 
background:none; 
padding-right:0;
}

/* Drop Down Menu Style */
.v-menu {
position: absolute;
visibility: hidden;
clear:both; 
width:164px; 
height:auto; 
margin:0; 
padding:0;
overflow:hidden;
color:#08215c;
background:url(../images/v-menu-btm.gif) no-repeat bottom;
}
.v-menu span.top { 
width:164px; 
height:8px; 
display:block;
background:url(../images/v-menu-top.png) no-repeat top;
}
.v-menu ul {
clear:both;
width:146px; 
margin:0; 
padding:0; 
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
background:url(../images/v-menu-rpt.png) repeat-y;
padding:3px 9px 6px 9px;
}
.v-menu ul li { 
background:url(../images/underline.gif) repeat-x top!important;
line-height:25px!important;
}
.v-menu ul li.first { background:none;}

.v-menu ul li a { 
color:#08215c; 
text-decoration:none;
padding-left:5px;
}

 

The Html code..

<div id="header"> <img src="images/banner.png" class="pngFix" />
  <div id="logoBg"><a href="#"><img src="images/logo.gif" alt="home" /></a></div>
  <ul id="navigation">
    <li><a href="#">Home</a>
      <ul class="v-menu ">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </li>
    <li><a href="#">Product</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</div>

[Axeia]

To prevent CSS from being selected 'further down the line' use the child-selector >

ul#navigation>li  is most likely what you're after.

 

Do note though that this isn't supported in Internet Explorer <=6 (>=7 does).

To get it working in IE6 you'll simply have to 'undo' the styling further down the line by setting the values.

[fbm247]

Im not sure you need 2 classes?

 

I normally do something like this

 

HTML

<div id="menu">
    <ul>
    <li><a href="#">parent link</a></li>
    <li><a href="#">parent link</a>
    <ul>
    <li><a href="#">child link</a></li>
    <li><a href="#">child link</a></li>
    <li><a href="#">child link</a></li>
    </ul>
    </li>
    <li><a href="#">parent link</a></li>
    </ul>
    </div>

 

CSS

#menu ul li a{
color:#FF0000;
}
#menu ul ul li a{
color:#00CC33;
}

 

this allows me to style the 2 sets of links differently. This is a very simple example but see how you put ul ul twice after the main class. Not sure if this is the best way but it always works for me.

 

Good Luck

 

-------------------------------------------------------------

 

fbm247

Web Design Somerset

[TheFilmGod]

#menu ul li a{

color:#FF0000;

}

#menu ul ul li a{

color:#00CC33;

}

 

The problem with this code is that you every selector property in the second list would need to override the initial selector you set in the first one. This may work on a small scale, but not on a massive project.

 

You should use two separate classes. Or use the ">".