Question

My HTML code is as follows:

<div class="c1"> Heading
 <div>
    <ul style="display:none">
        <li>Item1</li>
        <li>Item1</li>
    </ul>
 </div>
</div>

This is my CSS :

.c1:hover > div ul
{
   display:block;
}

How do I access lower level children with “>” operator? I basically want the list to be displayed on hover of c1.

Answer 1

You need to remove the inline style (style="display:none") from your markup – inline style will override the styles loaded from the stylesheet.

Instead, put this in your stylesheet:

.c1 > div ul {
   display:none;
}
.c1:hover > div ul {
   display:block;
}