[madmacgames]

Does anyone if it is possible to style a parent on a child hover? Yes yes I know you can with javascript, but I am talking about with only CSS.

This is for a drop-down CSS menu where I'd like the parent (i.e, main menu item) to stay highlighted when moving onto any of its children.

I'm using lists + CSS to create the dropdown menus. briefly the XHTML code looks like:

Code:
	<ul id="nav">
<!-- BEGIN navigationMenus -->
		<li id="{id}"><a href="#">{text}</a>
			<ul>
		<!-- BEGIN menu -->
			<!-- IF link -->
				<li><a href="{link}">{text}</a></li>
			<!-- ELSE -->
				<li><span class="submenuHeader">{text}</span></li>
			<!-- ENDIF link -->
		<!-- END menu -->
			</ul>
		</li>
<!-- END navigationMenus -->
	</ul>

So basically I am wanting to style the <li id="{id}"> part when its <ul> child it being hovered over.

I've tried playing around a bit with the < and > tags in CSS, but I'm not sure I completely understand them and couldn't make a go of it.

[headbirth]

That's a great question.

I don't have the experience to help you off hand, but I did a quick search in Google with the words "child hover"+css and turned up a few items.

Here's one:

http://archivist.incutio.com/viewlist/css-discuss/47572

[Millennium]

Is there a < selector in CSS? I know about the > selector, but I've never heard of a < one.

In any case, if you hover over a child element, you should still be hovering over the parent, pretty much by definition. I'm not sure it's possible to create a second hover state for an element whose children are being hovered over, but the first hover state should be maintained. Eric Meyer's Pure CSS Menus demo depends on this phenomenon.

So basically, what you need to do is apply your styles to #id:hover as though that were the only element. Even when you hover over its child UL, you're still hovering over the LI, because the UL is inside the LI. You can then style the UL by itself. This may require some interesting rearrangement of your CSS properties, but in the end it should work.

Oh, and it's worth keeping in mind that none of this will work in IE/Windows unless you're using something akin to the IE7 JavaScript routines. If that's OK with you then go right ahead, but it's something you should be aware of.

[madmacgames]

Many thanks...

Just as a note, I also needed a #nav ul li:hover > a entry to keep the text color of the parent the same. Otherwise, the li would stay highlighted, but the text color would change back as soon as moved off of it to the ul child.

Now I have some nice menus for my administration area that are not too bad on the eyes