유체 드롭 다운 메뉴가있는 탐색 모음

응답 형 웹 사이트 탐색 메뉴를 만들려고합니다. 나는 주 메뉴 유체가 있지만 거기에서 드롭 다운 메뉴를 얻는 방법을 모르는 시점에 왔습니다.유체 드롭 다운 메뉴가있는 탐색 모음

#nav { 
display: table; 
table-layout: fixed; 
width: 100%; 
} 

#nav ul { 
display: table-row; 
margin: 0; 
padding: 0; 
} 

#nav ul li { 
list-style: none; 
display: table-cell; 
text-align: center;

}

#nav ul li a { 
display: block; 
}

내가 내 CSS에 코드의 다음 줄을 추가 시도했지만 잘 작동하지 않았다 : 여기

<body> 
<div id="nav"> 
<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="">Exercises</a></li> 
     <ul> 
      <li><a href="exercise.html">Yoga</a></li> 
      <li><a href="">Pilates</a></li> 
      <li><a href="">Aerobics</a></li> 
     </ul> 
    <li><a href="">Clothes</a></li> 
    <li><a href="">Recipe</a></li> 
    <li><a href="">Contact</a></li> 
</ul> 
</div><!-- ends nav --> 

</body>

내 CSS의 : 여기 내 HTML 코드입니다 :

#nav ul li:hover ul { 
    display: block; 
}

도와주세요.

감사

출처

2014-12-06 almondn

부트 스트랩 프레임 워크를 사용하고 있습니까? – VSri58

드롭 다운 메뉴는 무엇입니까? 어디서 시작됩니까? – Akshay

질문의 목록 구조는

<li><a href="">Exercises</a></li> 
     <ul> 
      <li><a href="exercise.html">Yoga</a></li> 
      <li><a href="">Pilates</a></li> 
      <li><a href="">Aerobics</a></li> 
     </ul>

이

<li><a href="">Exercises</a></li> 
     <ul> 
      <li><a href="exercise.html">Yoga</a></li> 
      <li><a href="">Pilates</a></li> 
      <li><a href="">Aerobics</a></li> 
     </ul> 
    </li>

하위 <ul>는 부모 <li> 노드에 싸여이어야한다 올바르지 않습니다.

둘째, 드롭 다운 만들기 위해 아래의 코드를 추가

#nav li {position:relative;} 
#nav li ul{display:none;position:absolute;left:0;top:100%;}

그런 다음 그것을 아름답게하기 위해 더 많은 CSS 코드를 추가합니다.

출처

2014-12-07 15:04:53

유체 드롭 다운 메뉴가있는 탐색 모음

답변

관련 문제