Question

I have the following menu structure:

<ul class="menu">
  <li class="first leaf"><a href="#" title="" class="active">Home</a></li>
  <li class="expanded"><a href="#" title="Products">Products</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 1</a></li>
      <li class="leaf"><a href="#">Product 2</a></li>
      <li class="leaf"><a href="#">Product 3</a></li>
      <li class="last leaf"><a href="#">Product 4</a></li>
    </ul
  <li>
  <li class="expanded"><a href="#" title="Products">Products Level 2</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 5</a></li>
      <li class="leaf"><a href="#">Product 6</a></li>
    </ul>
  <li>
</ul>

What I’m looking to do is, when the Product 1 item is hovered, I want the parent Products menu item to change.

I’ve looked into CSS to do this, by trying to target the parent based on the child, but seems like it cannot be done.

Can this be done in jQuery?

Thanks

Answer 1

It depends on how you want it to be changed?

Edit: Updated DEMO for 2 li submenu’s

Just with CSS:

ul.menu li { display: inline-block; margin: 3px;  padding: 5px; vertical-align: top;}

ul.menu li:hover { font-weight: bold; background-color: green; }

ul.menu, ul.menu li:hover ul, ul.menu li:hover ul.menu li { font-weight: normal; background-color: white; }
ul.menu li:hover ul.menu li:hover { font-weight: bold; background-color: green; }

DEMO – Font & background

DEMO – Just the font