CSS 드롭 다운 설명

CSS 드롭 다운이 어떻게 작동하는지 설명 할 수 있습니까?CSS 드롭 다운 설명

어떻게 당신이> 선택과 CSS 드롭 다운을 만들 수 있습니다

나는

내 질문은, 그들의 대부분도> 선택을 가지고, 그들을 많이 봤어요?

많은 자습서를 살펴 보았지만> 어떻게해야하며 HTML 클래스 \ Ids와 어떻게 연결되는지 이해하지 못했습니다.

누군가 나를 부분적으로 설명 할 수 있습니까? 감사합니다.

출처

2012-09-14 Jony

@Jony 당신이 대답에 도움이 되었습니까? – freebird

HTML :

<ul class="menu"> 
    <li>   
     <span>menu 1</span> 
     <ul> 
      <li><a href="#" >Sub 1-1</a></li> 
      <li><a href="#" >Sub 1-2</a></li> 
      <li><a href="#" >Sub 1-3</a></li> 
     </ul> 
    </li> 
    <li>   
     <span>menu 2</span> 
     <ul> 
      <li><a href="#" >Sub 2-1</a></li> 
      <li><a href="#" >Sub 2-2</a></li> 
      <li><a href="#" >Sub 2-3</a></li> 
     </ul> 
    </li> 
</ul>

CSS :

ul.menu>li{ /*Only direct children*/ 
    float:left; 
    width: 60px; 
} 
ul.menu li ul{ 
    display:none; /*not visible*/ 
} 

ul.menu li:hover ul{ 
    display:block; /* visible when hovering the parent li */ 
}

설명은 CSS입니다.

데모 :
http://jsfiddle.net/FH7Z3/

출처

2012-09-14 12:04:07 Puyol

직접 어린이를 선택하는 데 사용됩니다.

는 의 선택은 container의 ID와 div 직접 아이들이있는 uls 타겟으로 마크 업

<div id="container"> 
    <ul> 
     <li> List Item 
     <ul> 
      <li> Child </li> 
     </ul> 
     </li> 
     <li> List Item </li> 
     <li> List Item </li> 
     <li> List Item </li> 
    </ul> 
</div>

다음 고려하십시오.

li의 하위 항목 인 ul을 타겟팅하지 않습니다.

이러한 이유로 인해 하위 조합을 사용하면 성능상의 이점이 있습니다.

출처

2012-09-14 11:46:51 freebird

오, 나는 꽤 많이 먹었지 만 어떻게 호버에 메뉴 팝업을 만들어 & 더 이상 숨어 있지 않게 숨 깁니 까? – Jony

@Jony Check Puyol의 anwser는 호버에 하위 메뉴를 엽니 다. 드롭 다운 메뉴에 대한 자습서가 너무 많습니다. Google에서 검색하는 것이 좋습니다. – freebird

예, 게시했을 때 정확하게 답변을 올렸습니다. 감사합니다. 감사합니다. – Jony

CSS의> 연산자는 다음 표현식이 직접적인 자식이어야 함을 의미합니다.

예를 들어 div span은 DIV 요소의 자손 인 SPAN 요소와 일치하지만 div > span은 DIV의 직접 하위 요소 인 SPAN 요소와 만 일치합니다.

http://www.w3schools.com/cssref/sel_element_gt.asp

출처