Can i apply a style to a parent element [duplicate]

This question already has answers here: Closed 11 years ago.

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 开发者_StackOverflow社区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.

---

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

---

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

li:hover

---

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.