How do you do this CSS selection?

[gregaryb]

I am in the process of getting rid of all my ids and switching to classes.

But I am now having trouble getting my popup menu working again.

When the mouse hovers over the <a></a> element in blue, I want to select the <div></div> element in green.

 

But this CSS code does not work

 

li > a:hover div{....}

li > a:hover + div{....}

 

So what is the correct way to select this element?

 

I also wish to select this element

 

<div class="NavSubMenuBalloon">

<div class="navigation">    <ul class="NavMenu">        <li class="NavMenuItem"><a href="index.php">Home</a></li>        <li class="NavMenuItem"><a href="CompanyProfile.php">Company Profile</a></li>        <li class="NavMenuItem"><a href="Store.php">Store</a><div class="NavSubMenuArrow">▸</div>              <div class="NavSubMenuBalloon">                  <div class="NavBalloonArrow"></div>                  <ul class="NavSubMenu">                    <li class="NavMenuItem"><a href="Category1.php">Comparators</a></li>                    <li class="NavMenuItem"><a href="Category2.php">LDR</a></li>                    <li class="NavMenuItem"><a href="Category3.php">LED</a></li>                    <li class="NavMenuItem"><a href="Category4.php">Operational Amplifiers</a></li>                    <li class="NavMenuItem"><a href="Category5.php">Phototransistor</a></li>                    <li class="NavMenuItem"><a href="Category6.php">Potentiometer</a></li>                    <li class="NavMenuItem"><a href="Category7.php">Rectifier Diodes</a></li>                    <li class="NavMenuItem"><a href="Category8.php">Resistor</a></li>                    <li class="NavMenuItem"><a href="Category9.php">Schottky Diodes</a></li>                    <li class="NavMenuItem"><a href="Category10.php">Transitors NPN</a></li>                    <li class="NavMenuItem"><a href="Category11.php">Transistors PNP</a></li>                    <li class="NavMenuItem"><a href="Category12.php">Zener Diodes</a></li>                </ul>            </div>        </li>    </ul>                     <div class="NavImage">        <img width="100%" alt="Navigation image 1" src="images/NavigationImage1.jpg" />    </div>    <div class="NavImage">        <img width="100%" alt="Navigation image 2" src="images/NavigationImage2.jpg" />    </div></div>

[dsonesuk]

li > a:hover div{....} will select div child of anchor which it does not have

li > a:hover + div{....} will select first direct sibling div (NavSubMenuArrow) element following anchor

 

you could use

li > a:hover + div + div

li > a:hover ~ div.NavSubMenuBalloon