Hello,
I'm working on a css driven dropdown menu and would like to style the different dropdowns (lists) differently. Mainly, I just need the background image, width and height of each list to vary.

For example, here are two dropdowns which I've identified with unique <ul> IDs ("cat_1_drop" and "cat_2_drop"). The <ul> for the entire menu system is called "navbar".

<ul id="navbar">
 
 <li><a id="cat_1" href="#"><span>1st Category</span></a>
  <ul id="cat_1_drop">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  </ul>
 </li>
 
<li>
 
<li><a id="cat_2" href="#"><span>2nd Category</span></a>
  <ul id="cat_2_drop">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  </ul>
 
</li>
</ul>

 
#navbar {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 margin: 0;
 padding: 0;
 height: 30 px;
 width: 732 px;
 margin-top: 116px;
}
 
#navbar li {
 list-style: none;
 float: left; 
 text-decoration: none;
 display: inline;
 padding: 0;
 margin: 0;
 }
 
#navbar li a {
 display: block;
 text-decoration: none;
}
 
#navbar li a:hover {
 font-weight:bold;
}
 
#navbar li ul {
display: none;
background-image: url(../images/menus/top_nav/about_us_drop_bg.jpg);
}
 
#navbar  li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
text-align:center;
margin: 0;
padding: 0; 
width: 116px;
height: 126px;
padding-top:25px;
line-height: 22px;}
 
#navbar  li:hover li, #navbar li.hover li {
float: none; }
 
#navbar  li:hover li a, #navbar li.hover li a {
color: #000; 
} 
 
 
 
 #cat_1_drop li ul {
 display: none;
 background-image: url(../images/menus/top_nav/about_us_drop_bg.jpg);
 }
 
 #cat_1_drop li:hover ul, #navbar li.hover ul {
 display: block;
 position: absolute;
 text-align:center;
 margin: 0;
 padding: 0; 
 width: 116px;
 height: 126px;
 padding-top:25px;
 line-height: 22px;}
 
 #cat_1_drop li:hover li, #navbar li.hover li {
 float: none; }
 
 #cat_1_drop li:hover li a, #navbar li.hover li a {
 color: #000; 
 
 } 
 
 
 
 #cat_2_drop li ul {
 display: none;
 background-image: url(../images/menus/top_nav/about_coffee_drop_bg.jpg);
 }
 
 #cat_2_drop li:hover ul, #navbar li.hover ul {
 display: block;
 position: absolute;
 text-align:center;
 margin: 0;
 padding: 0; 
 width: 146px;
 height: 130px;
 padding-top:25px;
 line-height: 22px;}
 
 #cat_2_drop li:hover li, #navbar li.hover li {
 float: none; }
 
 #cat_2_drop li:hover li a, #navbar li.hover li a {
 color: #000; 
 
 }

I thought the IDs on the nested <ul> tags would override the style on the "navbar" <ul> but they don't seem to. If I strip out the redundancies between the "navbar" <ul> and the "cat" <ul>s (such as background-image tags. then the list just doesn't even show a bg image. Can anyone tell me what I'm doing wrong? Thanks for any help.

Can you post a link to the website? Also, what browser(s) does this occur in?

You can see what I'm working on here http://brianonweb.com/clients/LFT/top_menu.html

I've been testing in Firefox but just looked at IE and noticed that it has its own set of issues. This is frustrating, I'm trying to avoid a javascript menu system.

"cat_1" and "cat_2" are actually "about_us" and "about_coffee" on the page.

See how the "About Coffee" list should be wider than, say, "Flagstaff"? I'm creating separate bg images for each dropdown so that it appears like the dropdowns come down behind that organic edge.

Your menu <li> is out of place. This is weird. I actually have a problem I can't solve So I sort of cheated and decided to use a conditional comment. Add this in:

<!--[if IE 7]>
<style type="text/css">
#navbar li{margin-top:-40px;}
</style>
<![endif]-->

Fixes your problem, but hopefully someone who isn't having a brain fart today can solve it and explain it. I am interested in this answer. Isn't anything I can think of....good question OP.

One thing I see right away is that you have not cleared the floats in your list. The easiest way to do this is to add overflow: auto to the #navbar ul, then your floated list items will be 'contained' within the UL itself, as you intended it to be.

IE and noticed that it has its own set of issues. This is frustrating, I'm trying to avoid a javascript menu system.

IE has been frustrating web designers all along.. and it still is! You won't need a javascript solution, but you most likely will need separate css files just to hold the 'fixes' needed to make IE behave correctly, called by conditional comments in your html.

Unfortunately, it's really whacked in IE6, haven't looked at it with IE7, and we don't have IE8, but that at least should behave more like Firefox that it's predecessors.

I'll have to download it and pick thru the code for the solution.

Well it turns out that the reason it was occuring is because it had hasLayout. So put clear:both; on .topnav and then bring the menu down with margin. (#navbar will need margin-top:116px)

This fixes it perfectly in IE7. I don't have IE6 to test so let me know if I need to upload it to my site and then use browsershots.org to view IE6

Cheers

Thank you for the tips on the IE correction and clearing the floats. I'm still not sure how to solve the main problem which is (simplified):

How do I get the different nested lists to have separate id styles applied (bg images, heights and widths)? The generic structure of the html is:

 
<ul>
     <li>Dropdown 1
     <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     </ul>
     </li>
 
     <li> Dropdown 2
     <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     </ul>
     </li>
<ul>
 

Shouldn't I be able to assign classes or categories to the containing <ul> and the nested <ul>s? Like so:

 
<ul id="navbar">
 
  <li><a href="#">About Us</a>
  <ul id="about_us_drop">
  <li><a href="#">Our Roastery</a></li>
  <li><a href="#">Our Menu</a></li>
  <li><a href="#">Our History</a></li>
  </ul>
  </li>
 
  <li>
  <li><a href="#">About Coffee</a>
  <ul id="about_coffee_drop">
  <li><a href="#">Growing &amp; Processing</a></li>
  <li><a href="#">Roasting</a></li>
  </ul>
  </li>
 
</ul>
 

Maybe I should wrap the whole thing in a div called "navbar" and take the id "navbar" out of the first <ul> listing? Does this seem plausible?

 
<div id="navbar">
<ul>
 
  <li><a href="#">About Us</a>
  <ul id="about_us_drop">
  <li><a href="#">Our Roastery</a></li>
  <li><a href="#">Our Menu</a></li>
  <li><a href="#">Our History</a></li>
  </ul>
  </li>
 
  <li>
  <li><a href="#">About Coffee</a>
  <ul id="about_coffee_drop">
  <li><a href="#">Growing &amp; Processing</a></li>
  <li><a href="#">Roasting</a></li>
  </ul>
  </li>
 
</ul>
</div>
 

Hold on...I may have it. Tagging #drop_ID_name to a couple #navbar selections seems to work. I just have to create duplicates. Like so:

 
 #navbar li ul#about_us_drop {
 display: none;
 overflow: auto;
 background-image: url(../images/menus/top_nav/about_us_drop_bg.jpg);
 }
  
 #navbar  li:hover ul#about_us_drop, #navbar li.hover ul#about_us_drop {
 display: block;
 position: absolute;
 text-align:center;
 margin: 0;
 padding: 0; 
 padding-top:25px;
 line-height: 22px;
 width: 116px;
 height: 126px;
 
 }

 
 #navbar li ul#about_coffee_drop {
 display: none;
 overflow: auto;
 background-image: url(../images/menus/top_nav/about_coffee_drop_bg.jpg);
 }
  
 #navbar  li:hover ul#about_coffee_drop, #navbar li.hover ul#about_coffee_drop {
 display: block;
 position: absolute;
 text-align:center;
 margin: 0;
 padding: 0; 
 padding-top:25px;
 line-height: 22px;
 width: 146px;
 height: 130px;
 
 }

It may not be the best way, but it seems to work (including a few IE conditional stylesheets):

http://brianonweb.com/clients/LFT/top_menu.html

I'm taking this down soon but the fix was tagging the ID with each other instead of a separate designation:

 
 #navbar li ul#about_us_drop {
 display: none;
 overflow: auto;
 background-image: url(../images/menus/top_nav/about_us_drop_bg.jpg);
 }
 
 #navbar  li:hover ul#about_us_drop, #navbar li.hover ul#about_us_drop {
 display: block;
 position: absolute;
 text-align:center;
 margin: 0;
 padding: 0; 
 padding-top:25px;
 line-height: 22px;
 width: 116px;
 height: 126px;
 
 }

The HTML which pulls in the CSS:

 
<ul id="navbar">
 
    <li><a id="about_us" href="#" title"About Us"><span>About Us</span></a>
  <ul id="about_us_drop">
  <li><a href="#">Our Roastery</a></li>
  <li><a href="#">Our Menu</a></li>
  <li><a href="#">Our History</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Favorite Links</a></li>
        </ul>
 </li>
 
</ul>
 

Thanks for your help.

So put clear:both; on .topnav

I already told the OP to clear his floats and how to do it.

the fix was tagging the ID with each other instead of a separate designation:

In other words, the fix had to do with specificity and being MORE specific