CSS - Hover One Element, Change Visibility on Another

Question

HTML is as Follows

<ul id="master">
 <li class="has-sub">Item</li>
   <ul class="sub">
    <li>Sub One</li>
   </ul>
 </li>
</ul>

CSS is

.sub { visibility: hidden; }
#master .has-sub:hover > .sub { visibility: visible;} 

I pretty much took the approach from a site where this works, but on my adventure the hero fails. Badly. What am I doing wrong?

Answer 1

Your HTML is invalid...you have closed <li class="has-sub">Item</li> too soon.

.sub {
    visibility: hidden;
}
#master .has-sub:hover > .sub {
    visibility: visible;
}

<ul id="master">
    <li class="has-sub">Item
        <ul class="sub">
            <li>Sub One</li>
        </ul>
    </li>
</ul>

Answer 2

First your html is invalid please fix that And Try this Change your html to

  <ul id="master">
    <li class="has-sub">Item
        <ul class="sub">
            <li>Sub One</li>
        </ul>
    </li>
</ul>

  .sub {
    visibility: hidden;
}
#master .has-sub:hover > .sub {
    visibility: visible;
}

DEMO