使用CSS創建交互式（？）導航？

Question

我對HTML和CSS相當陌生，我不知道它的確切詞，所以我想我的快速草圖將幫助我溝通我要去的東西。

圖片： HTML

 <nav> 
      <ul> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">CS/IS 101 Assignments</a></li> 
        <ul> 
         <li><a href="#">Puzzles</a></li> 
         <li><a href="#">Word</a></li> 
         <li><a href="#">Excel</a></li> 
         <li><a href="#">Access</a></li> 
         <li><a href="#">PowerPoint</a></li> 
        </ul> 
       <li><a href="#">CS/IS 260 Assignments</a></li> 
        <ul> 
         <li><a href="#">Chapter 3</a></li> 
         <li><a href="#">Chapter 4</a></li> 
         <li><a href="#">Chapter 5</a></li> 
         <li><a href="#">Chapter 6</a></li> 
         <li><a href="#">Chapter 7</a></li> 
        </ul> 
       <li><a href="#">Favorite Websites</a></li> 
       <li><a href="#">Final</a></li> 
       <li><a href="#">Midterm</a></li> 
       <li><a href="#">About Me</a></li> 
     </ul> 
    </nav> 

CSS的一切資產淨值相關

.main-header nav{ 
background-color:#333333; 
height:40px; 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
} 

.main-header nav ul{ 
list-style: none; 
margin: 0 auto; 
} 

.main-header nav ul li{ 
float:left; 
display:inline; 
} 

.main-header nav a:link, .main-header a:visited{ 
color:#FFF; 
display:inline-block; 
padding: 10px 25px; 
height: 20px; 
} 

.main-header nav a:hover, .main-header nav a:active, .main-header nav .active a:link, .main-header nav .active a:visited{ 
background-color:#bc9c98; 
text-shadow: none; 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
} 

.main-header nav ul li a{ 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
} 

Answer 1

這裏的下拉導航的演示：http://codepen.io/anon/pen/iwuGI

您的標記和CSS真的很接近！

標記變化很小。它需要將嵌套的UL元素移動到父LI中。

<li><a href="#">CS/IS 101 Assignments</a></li> 
    <ul> 
     <li><a href="#">Puzzles</a></li> 
     <li><a href="#">Word</a></li> 
     <li><a href="#">Excel</a></li> 
     <li><a href="#">Access</a></li> 
     <li><a href="#">PowerPoint</a></li> 
    </ul> 

到：

<li><a href="#">CS/IS 101 Assignments</a> 
    <ul> 
     <li><a href="#">Puzzles</a></li> 
     <li><a href="#">Word</a></li> 
     <li><a href="#">Excel</a></li> 
     <li><a href="#">Access</a></li> 
     <li><a href="#">PowerPoint</a></li> 
    </ul> 
</li> 

添加CSS隱藏嵌套UL：

.main-header nav ul ul { 
    display: none; 
} 

改寫爲LIS父CSS（我們不需要他們浮！）：

.main-header nav ul li ul li { 
    float: none; 
    display: block; 
} 

當我們將鼠標懸停在父項上時顯示嵌套的UL：

.main-header ul li:hover > ul { 
    display: block; 
}