ul을 스타일 시트와 함께 ul 내부에서 사용하는 경우와 충돌합니다.

Question

유일한 문제는 "섹션"링크를 가리키면 목록이 인라인 표시됩니다. 나는 그것이 다른 사람 밑에 각 연결을 의미하는 명부로 오기를 원한다. 섹션의 목록 만. 나는이 스타일 시트를 시도했지만 적합하지 않을 것이다.

이 내 HTML

<div class="nav"> 
    <ul class="navbar" > 
    <li><a href="Home.aspx">Home</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Sections</a> 
     <ul class="SectionList"> 
      <li><a href="#">haha</a></li> 
      <li><a href="#">haha</a></li> 
      <li><a href="#">haha</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Appointment</a></li> 
    <li><a href="Registeration.aspx">Registration</a></li> 
    </ul> 
</div> 

이며,이 내 스타일 시트

ul.navbar 
{ 
    list-style-type:none; 
    padding:6px 0 6px 0; 
    margin:0; 
} 

ul.navbar li 
{ 
    display:inline; 
    float:left; 
} 

.SectionList 
{ 
    display:none; 
    padding: 0; 
    margin: 0; 
} 

ul.SectionList li 
{ 
    padding:0; 
    margin:0; 
} 

.navbar li:hover .SectionList 
{ 
    display:block; 
} 

Answer 1

당신이 원하는 출력 당신이보기에 작업하고 느낄 필요를 위해 바이올린을 참조한다.

ul.navbar li 
{ 
    display:inline; 
    float:left; 
} 

모든 후손에

display:inline 

을 적용했다 : 불을 지르고와 http://jsfiddle.net/PthNP/

ul.navbar 
{ 
list-style-type:none; 
padding:6px 0 6px 0; 
margin:0; 

} 

ul.navbar li 
{ 
display:inline; 
float:left; 
} 

.SectionList 
{ 
display:none; 
padding: 0; 
margin: 0; 
} 

ul.SectionList li 
{ 
padding:0; 
margin:0; 
} 

.navbar li:hover .SectionList 
{ 
display:block; 
    width:50px; 

} 

.SectionList li 
{ 
    width:100px; 
    display:block; 
} 

Answer 2

검사는이 있음을 보여 주었다. 수정하려면 다음으로 변경하십시오.

ul.navbar > li 
{ 
    display:inline; 
    float:left; 
} 

첫 번째 자손 만 선택합니다. Here은 CSS 참조 문서입니다.

또한 GRC pure CSS menus에서 좋은 아이디어를 얻을 수 있으므로 바퀴를 완전히 다시 만들 필요가 없습니다. 행운을 빕니다.