CODEWITHSUNDEEP
css
NotaGuruAtAll
NotaGuruAtAll

Reputation: 533

CSS - Hover One Element, Change Visibility on Another

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?

Upvotes: 8

Views: 4084

Answers (2)

Paulie_D
Paulie_D

Reputation: 115011

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>

Upvotes: 10

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

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

Upvotes: 1

Related Questions