下拉列表不起作用html css

我遇到問題，無法解決問題。我已經創建了這個HTML頁面，但#drop上的:hover選擇器不起作用。下拉列表不起作用html css

#drop { 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: #4CAF50; 
 
    padding: 10px; 
 
} 
 
#droplist { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
#droplist a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: olivedrab; 
 
    padding: 10px; 
 
} 
 
#drop:hover #droplist { 
 
    display: block; 
 
} 
 
#droplist a:hover { 
 
    background-color: olive; 
 
}

<!DOCTYPE html> 
 
<html lang="it"> 
 
<!-- ... --> 
 
<body> 
 
    <div id="pagina"> 
 
     <div id="drop">Hover for open the menu</div> 
 
     <div id="droplist"> 
 
      <a href="#a">Link 1</a> 
 
      <a href="#b">Link 2</a> 
 
      <a href="#c">Link 3</a> 
 
     </div> 
 
     <br/>text text text text text text text text text 
 
    </div> 
 
</body> 
 
</html>

我嘗試用ID #drop懸停在div但該元素#droplist不出來。

來源

2017-08-05 Matteo

您不能選擇#drop:hover #droplist，因爲#droplist不是#drop的子女。

改爲使用#drop:hover + #droplist。

的element1 + element2選擇用於選擇和款式每element2，是經過element1

#drop { 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: #4CAF50; 
 
    padding: 10px; 
 
} 
 

 
#droplist { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
#droplist a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: olivedrab; 
 
    padding: 10px; 
 
} 
 

 
#drop:hover+#droplist { 
 
    display: block; 
 
} 
 

 
#droplist a:hover { 
 
    background-color: olive; 
 
} 
 

 
#droplist:hover { 
 
    display: block 
 
}

<!DOCTYPE html> 
 
<html lang="it"> 
 
<!-- ... --> 
 

 
<body> 
 
    <div id="pagina"> 
 
    <div id="drop">Hover for open the menu</div> 
 
    <div id="droplist"> 
 
     <a href="#a">Link 1</a> 
 
     <a href="#b">Link 2</a> 
 
     <a href="#c">Link 3</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

編輯立即放置：你可能想在

#droplist:hover { 
    display: block 
}

添加

使下拉菜單不會消失，當你將它懸停時

來源

2017-08-05 20:16:24 Ivan

沒問題Matteo，看看我上面的編輯（在你的代碼中添加'#droplist：hover {display：block}'）。同時考慮爲未來的用戶提供答案並接受答案。謝謝！ – Ivan

下拉列表不起作用html css

回答

相關問題