你的最后一个样式写的有问题
.dpdct:hover .dropdown-content {display: block
}
这样写是鼠标悬浮后它的子元素显示
在两个选择器之间放个+是鼠标悬浮后它的下一个兄弟元素显示
.dpdct:hover+.dropdown-content {display: block
}
不过这样改完,鼠标悬停确实能显示下拉选项,但是只要鼠标移开主菜单下拉选项就会消失。建议你改成
.head_section:hover .dropdown-content {display: block
}
这样应该才是你需要的效果
可以参考CSS 选择器参考手册
希望能帮到你
用div来做是这样的, 你看下是这个问题吗?
<style>.box ul{ display:none}
.box:hover ul{ display:block}
</style>
<div class="box">
<span>滑动过来</span>
<ul>
<li>选项123</li>
<li>选项345</li>
<li>选项456</li>
<li>选项789</li>
</ul>
</div>