你的最后一个样式写的有问题
.dpdct:hover .dropdown-content {display: block
}
这样写是鼠标悬浮后它的子元素显示
在两个选择器之间放个+是鼠标悬浮后它的下一个兄弟元素显示
.dpdct:hover+.dropdown-content {display: block
}
不过这样改完,鼠标悬停确实能显示下拉选项,但是只要鼠标移开主菜单下拉选项就会消失。建议你改成
.head_section:hover .dropdown-content {display: block
}
这样应该才是你需要的效果
可以参考CSS 选择器参考手册
希望能帮到你
*{ margin:0px autopadding:0px}.nav{ width:930pxmargin:0px auto}
ul{ list-style:none}
ul li{ float:leftwidth:100px}
ul li ul{ display:none}
ul li:hover ul{ display:block}
这样在支持LI:HOVER的浏览器下是可以的。。不支持的浏览器通过JS解决