HTML中鼠标悬浮时的下拉菜单用CSS怎么做

html-css012

HTML中鼠标悬浮时的下拉菜单用CSS怎么做,第1张

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：

<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>

你的最后一个样式写的有问题

.dpdct:hover .dropdown-content {

    display: block

}

这样写是鼠标悬浮后它的子元素显示

在两个选择器之间放个+是鼠标悬浮后它的下一个兄弟元素显示

.dpdct:hover+.dropdown-content {

display: block

}

不过这样改完，鼠标悬停确实能显示下拉选项，但是只要鼠标移开主菜单下拉选项就会消失。建议你改成

.head_section:hover .dropdown-content {

    display: block

}

这样应该才是你需要的效果

可以参考CSS 选择器参考手册

希望能帮到你