h2

#menu a

!important

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

<div id="menuhcontainer">
<div id="menu">
<ul>
<li><a href="#"><h2>Ventilation</h2></a>
<ul>
<li><a title="#" href="#" class="parent">Bathroom Fans</a>
<ul>
<li><a title="#" href="#" class="child">Ceiling Mounted</a></li>
<li><a title="#" href="#" class="child">Fans with Lights</a></li>
<li><a title="#" href="#" class="child">Fans with Heaters</a></li>
<li><a title="#" href="#" class="child">Decorative Fans</a></li>
</ul>
</li>
<li><a title="#" href="#" class="parent">Range Hoods</a>
<ul>
<li><a title="#" href="#" class="child">Wall Chimney Range Hoods</a></li>
<li><a title="#" href="#" class="child">Island Range Hoods</a></li>
<li><a title="#" href="#" class="child">Under Cabinet Range Hoods</a></li>
</ul>
</li>
<li><a title="#" href="#" class="parent">Whole House Fans</a></li>
<li><a title="#" href="#" class="parent">Dryer Booster Fans</a></li>
<li><a title="#" href="#" class="parent">Utility Fans</a>
<ul>
<li><a title="#" href="#" class="child">Wall Mounted Utility Fans</a></li>
<li><a title="#" href="#" class="child">Inline Utility Fans</a></li>
<li><a title="#" href="#" class="child">Utility Fans Accessories</a></li>
</ul>
</li>
</ul></li>
</ul>
<ul>
<li><a title="#" href="#"><h2>Fans</h2></a>
<ul>
<li><a title="#" href="#" class="parent">Bathroom Fans</a>
<ul>
<li><a title="#" href="#" class="child">Ceiling Mounted</a></li>
<li><a title="#" href="#" class="child">Fans with Lights</a></li>
<li><a title="#" href="#" class="child">Fans with Heaters</a></li>
</ul>
</li>
<li><a title="#" href="#" class="parent">Ceiling Fans</a></li>
<li><a title="#" href="#" class="parent">Floor Fans</a></li>
<li><a title="#" href="#" class="parent">Table Fans</a></li>
</ul>
</li>
</ul>
<ul>
<li><a title="#" href="#"><h2>Air Purifiers</h2></a></li>
</ul>
</div><!-- end the menuh-container div -->
</div><!-- end the menuh div -->

------------------------------------------------------------
Thanks again!

Specificity will, or should, always take care of it if the HTML is structured semantically, which is why this particular menu was coded with the top level (header) items wrapped in h2's - I know the code author really well ;)

however Fiona,

<li><a href="#"><h2>Ventilation</h2></a>

is incorrect nesting of HTML elements (the HTML validator [validator.w3.org] is a useful tool for picking up nesting errors) an inline element <a> cannot contain a block element <h2>, so the HTML should like this:

<li><h2><a href="#">Ventilation</a></h2>

then the css for the normal links would be:

#menu a {yourstyles}

and to specifically pick out or target the links in the header

#menu h2 a {header link style overrides}

the first rule will also target the links that are inside the <h2> element as they are still descendants of the #menu div.. the second will only target the header links as none of the other #menu links have an h2 element in their ancestry so it should be used for any overrules required

#menu li:hover {position: relative;}

to

#menu li:hover {z-index:100;}

but now the width I had set for the drop downs changed and it looks terrible. I have each main header of the menu set at different widths based on what is contained (i.e.<ul style="width: 16%"> and <ul style="width: 25%">). I then had the width of the dropdown set to 100% of this as follows:

#menu ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 100%;
}

Now to contain it on the page I had to change it back to

#menu ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 15em;
}

wherein the dropdowns do not match the header of the menu.

Would it be best to go back to "position:relative" and find another solution for problem in FF (menu hidden behine content) or should I try and find a method to set each drop-down width individually to match?

Thanks for your help :) You guys save me all the time now :)