Question

I have a drop down menu done in css only, done in the following way:

.top-menu
{
  padding:0;
  margin:0;
  list-style: none;
  height:50px;
}  

.top-menu > li > a
{
  display:block;
  text-decoration:none;
  font-size:16px;
  line-height:16px;
  padding:15px 20px;
  border: 1px solid transparent;
  color:#fff;
}

.top-menu > li > a:hover
{
  background-color: #fff;
  color: #333;
  border: 1px solid #004488;
}


.top-menu > li.popout:hover ul
{
  display:block;
}

The class “top-menu” is for the top level ul element.

What I want to do is apply the “.top-menu > li > a:hover” style for when I hover over the popout ul, so that the top level link has the hover style also when I hover above its descendants in the ul below.
Thanks.

Here is the html:

<ul class="top-menu">
<li><a href="/">Home</a></li>
    <li>
  <a href="/welcome/">Welcome</a>
  </li>
    <li class="popout">
  <a href="/link2/">link2</a>
  <ul>
      <li><a href="/link2/sublink1/">sublink1</a></li>
      <li><a href="/link2/sublink2/">sublink2</a></li>
    </ul>
  </li>

I want to apply the hover style for link2, when I hover over the descendant ul (which contains sublink2 and sublink1)

Answer 1

I believe you need to use JavaScript for that particular behavior. There is no way for you to apply styles to the parent and child at the same time.

Edit: Thinking about this again, you could do something like that:

.topmenu:hover > li.popout {...} /* Parent styles */
.topmenu:hover li.popout ul {...} /* Child styles */