0

I am trying to make a menu bar with sub sub menus. When I hover over one of the sub sub menu links, I want the sub menu parent of that sub sub menu to change background colors.

Simplified form of my menu.

<ul id="menu-bar">
    <li><a href="index.html">Home</a></li>
    <li><a href="test.html">Test</a>
        <ul>
            <li><a href="test1.html">Test 1</a>
                <ul>
                    <li><a href="test1a.html">Test 1 A</a></li>
                    <li><a href="test1b.html">Test 1 B</a></li>
                    <li><a href="test1c.html">Test 1 C</a></li>
                </ul>
            </li>
            <li><a href="test2.html">Test 2</a></li>
            <li><a href="test3.html">Test 3</a></li>
        </ul>
    </li>
</ul>

When I hover over the Test 1 A link, I want the Test 1 link to change backgound color. I don't think I can do this with CSS

If it helps any, I am using an active class for the active link.

Thanks in advanced.

DrClass
  • 11
  • 2
  • 4
    you're right. you can't have child nodes changing their parents in css. you'll need to use JS. – Marc B Oct 27 '15 at 16:49
  • Try to play around with this: http://codepen.io/anon/pen/RWyryJ ... Anyway i would suggest you using js/jquery – Marcel Wasilewski Oct 27 '15 at 17:02
  • As you have tagged the question with [Javascript], here is a simple solution using Javascript -- http://jsfiddle.net/abhitalks/dh01f2jg/ – Abhitalks Oct 27 '15 at 17:13

0 Answers0