從現有的CSS菜單製作下拉菜單

ul li ul.dropdown{ 
 
\t min-width: 125px; 
 
    background: #f2f2f2; 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
} 
 
ul li:hover ul.dropdown{ 
 
    display: block; 
 
} 
 
ul li ul.dropdown li{ 
 
\t display: block; 
 
    }

<div class="navigation"> 
 
    
 

 

 
\t <ul> 
 
\t <li><a href = 'index.html'>Home</a></li> 
 
\t <li><a href = 'media.html'>Media Design</a></li> 
 
\t <li><a href = 'innovatie.html'>Innovatieroutes</a></li> 
 
\t <li><a href = 'info.html'>Informatie</a></li> 
 
\t   <ul class="dropdown"> 
 
      <li><a href="#">Open dagen</a></li> 
 
      <li><a href="#">Beroepen</a></li> 
 
      <li><a href="#">Studie</a></li> 
 
\t \t \t </ul> 
 
\t <li><a href = 'contact.html'>Contact</a></li> 
 
</ul>

我試圖與一個下拉列表中的CSS菜單，但不知何故，我不能讓菜單下拉，當我在鼠標懸停標籤「信息」後，子菜單將在「信息」之後顯示。也許你們中的一些人能夠用我的菜單幫助我。

來源

2015-10-16 SmashingJummy

固定代碼

ul li ul.dropdown{ 
 
\t min-width: 125px; 
 
    background: #f2f2f2; 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 999; 
 
    left: 0; 
 
} 
 
ul li:hover ul.dropdown{ 
 
    display: block; 
 
} 
 
ul li ul.dropdown li{ 
 
\t display: block; 
 
    }

<div class="navigation"> 
 
    
 

 

 
\t <ul> 
 
\t <li><a href = 'index.html'>Home</a></li> 
 
\t <li><a href = 'media.html'>Media Design</a></li> 
 
\t <li><a href = 'innovatie.html'>Innovatieroutes</a> 
 
\t <li><a href = 'info.html'>Informatie</a> 
 
\t   <ul class="dropdown"> 
 
      <li><a href="#">Open dagen</a></li> 
 
      <li><a href="#">Beroepen</a></li> 
 
      <li><a href="#">Studie</a></li> 
 
\t \t \t </ul> 
 
    </li> 
 
\t <li><a href = 'contact.html'>Contact</a></li> 
 
</ul>

你的錯誤是，你寫的ulli收盤標籤</li>之外。你必須把ul的代碼正好在a結束標記的結束標記</a>

來源

2015-10-16 08:28:49

結束Xahed，不知怎的， – SmashingJummy

我的答案看起來很好。如果您將鼠標懸停在信息上，則會看到子菜單 –

稍加說明會有幫助。什麼是問題，你的答案如何解決它？ – showdev

您需要將ul置於li之內。

來源

2015-10-16 08:27:44

從現有的CSS菜單製作下拉菜單

回答

相關問題