child to parent

Problem with hover on a menu

[rossmurphy]

Hi all,

So i have this HTML:

<ul>
<li><a href="jobs.php">Jobs</a>
<ul style="width: 138px;">
<li><a href="#">Open Jobs</a></li>
<li><a href="#">Approval</a></li>
<li><a href="#">Paperwork</a></li>
<li><a href="#">Job Archive</a></li>
</ul>
</li>
</ul>

I have been able create a rollover effect on the ul a and been able to show a drop menu when ul a:hover is triggered.

The problem i am trying to solve is once the mouse is over the ul ul li section the original rollover of ul li goes back to the original color as the mouse is no longer over this section.

Does anyone know if it is possible to select the parent of a chil when the mouse is hovering over the child?

Cheers.

[g1smd]

I use a CSS class="here" to style the ul li level, with a little bit of PHP that decides where to drop that attribute in by reading the requested URL and comparing it.

[swa66]

Rossmurphy, welcome the webmasterworld.

You will have to use hovering over the parent <li> (which you still do hover). So IE6, will need scripted help to grasp it, over have degraded performance.

Basically you render multiple hovered elements in a highlighted color scheme:
The parent: #menu>li:hover {...}
and the child: #menu>li:hover>li:hover {...}

Take care when you try to get it going for more levels or if you try to avoid the direct child selector to accommodate IE6: it can become tricky.