下拉列表不起作用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不出来。

答

您不能选择#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 
}

添加

使下拉菜单不会消失，当你将它悬停时

没问题Matteo，看看我上面的编辑（在你的代码中添加'#droplist：hover {display：block}'）。同时考虑为未来的用户提供答案并接受答案。谢谢！ – Ivan

下拉列表不起作用html css

相关推荐