CSS - 하나의 요소, 또 다른

Question

HTML에 변경 가시성 다음과 같다을 마우스

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

CSS이 작동하는 사이트에서 접근을했다,하지만 내 모험에

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

나는 꽤 많이있다 영웅은 실패합니다. 심하게. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

귀하의 HTML이 유효로 HTML을 변경 시도하십시오 유효하지 않습니다 ... 당신은 너무 빨리><li class="has-sub">Item</li을 폐쇄했다.

.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

먼저 당신의 HTML을 수정 그 그리고이

<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