-1

Possible Duplicates:
Style parent li on child li:hover.
Is there a CSS parent selector?

I have a nave menu.

On li a:hover the #drop-down-menu appears.

Can I apply a style to the li a while hovering over the drop down menu? Can you apply a style to the parent element while hovering over the child element?

i.e. I want a border-bottom:2px solid #ffffff; to appear under the li a, while i am hovering over the #drop-down-menu.

Can't figure it out.

Community
  • 1
  • 1
tony noriega
  • 7,523
  • 17
  • 53
  • 72

3 Answers3

1

You would need to use javascript for this. CSS doesn't allow any way to select a parent element.

Jedediah
  • 1,916
  • 16
  • 32
0

If your anchor is - or can be - fullsize (i.e. the size of the list item), then you can use:

li:hover
NGLN
  • 43,011
  • 8
  • 105
  • 200
0

No. CSS doesn't work that way. You can only go down.

However, if you have your HTML structured properly, you can achieve the effect you're going for.

Assuming the following HTML:

<ul id="main">
  <li><a href="link.php">A dropdown</a>
    <ul class="dropdown">
       <li><a href="link2.php">A submenu</a></li>
    </ul>
  </li>
</ul>

You can have the following CSS, and it should work:

#main li:hover a {
  border-bottom: 1px solid black;
}

Here's a (very) rough Fiddle.

Shauna
  • 9,495
  • 2
  • 37
  • 54