Hard one: Styling a parent without styling the children

HTML & CSS
1

Hi everyone.

I’m having a hell of time creating a dropdown menu with CSS. The problem is that the main level items need to be using image-replacement to display a graphic of the menu item in a fancy font, but the sub-menu items do not. However, due to the cascade my submenu items are inheriting text-indent: -9000px and I don’t know how to stop it.

Here’s the HTML:

<li id="our-company" class="first">
<a href="http://www.greatcompany.com/company/" title="Company">Company</a> 
<ul id="submenu"> 
<li id="more-about-our-company">
<a href="http://www.greatcompany.com/company/more-about-our-company/" title="More About Our Company">More About Our Company</a> 
</li> 
</ul> 
</li>

and here’s the CSS:



ul#nav.right li#company a {
	background: url('img/nav/company.gif') no-repeat top left;
	text-indent: -9000px;
	display: block;
	width: 61px;
	height: 16px;
}

ul#nav.right li#company a:hover {
	background: url('img/nav/company.gif') no-repeat bottom left;
}

/* WEIRD STYLING SO I CAN FIND THE SUBMENU LINKS AS THEY ARE INHERITING -9000PX INDENT *//
#nav ul li a {
	color: white;
	display: block;
	float: left;
	border: 1px solid red;
	background-image: none !important;
}

You can get your firebug on here: http://microprobe.zacharyross.net/ Help! I don’t want to have to create dozens of super-specific rules for the dozens of submenus yet to come! Any ideas?

2

Thanks guys!

Just removing the “ul#nav.right” from the image-replacement links did the trick. But I went ahead and rewrote the whole nav to be more elegant. This code came from a Themeforest WP theme and the css files are insanely redundant in general so I’m combing through the whole thing.

Thanks again!

3

You need to be a little less specific. Start off by applying everything that all the submenus will have in common to #nav li a. You can simplify things by getting rid of the “right” class and just giviing #nav float:right. This will have the added benefit of stopping IE6 from ignoring these rules (it can’t deal with things like #id.class or a.aclass.anotherclass).

Now you start targetting the things that don’t need this blanket styling:

#nav li a {
    background: url('img/nav/home.gif') no-repeat top left;
    text-indent: -9000px;
    display: block;
    width: 39px;
    height: 16px;
}

#nav li#company a {
  /* only change things that are different from the default above */
  background-image: url('img/nav/company.gif');
  width:61px;
}

#nav li li a {
  text-indent:0; /* undo text indents for items in sub-lists
  width:80px; /* stop sub-items inheriting width of parent list item */
  background:white; /* overwrite 'home.gif' with a white background */
}

The alternative method to this is a lot simpler:

#nav > li a {
    background: url('img/nav/home.gif') no-repeat top left;
    text-indent: -9000px;
    display: block;
    width: 39px;
    height: 16px;
}

#nav li#company a {
  /* only change things that are different from the default above */
  background-image: url('img/nav/company.gif');
  width:61px;
}

#nav li li a {
  /* specific stuff here - nothing inherited because of ">" selector used above! */
}

You can even have both a #nav > li a and #nav li a to inherit some things but not others.

4

Just so you know, if you do use Raffles suggestion of using the general child selector then you will lose IE6 in the process (I don’t know if you care or not, but I’d avoid using that selector (and use his other suggetion) to keep IE6 support :slight_smile: