html下拉列表兼容性,css打造下拉菜单

最新推荐文章于 2023-10-31 22:10:07 发布

YozenTung

最新推荐文章于 2023-10-31 22:10:07 发布

阅读量176

点赞数

文章标签： html下拉列表兼容性

本文介绍了一种使用纯CSS制作下拉菜单的方法，并提到了IE6不支持:hover伪类的问题。为了解决这个问题，作者建议可以通过JS进行兼容性处理，但同时也指出由于IE6的普及率极低，可以考虑不再支持。该菜单样式包括浮动布局、相对定位等，适用于网页导航菜单设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯css写的菜单，通过:hover伪类控制子菜单的显示，ie6-不支持非连接对象的伪类，需要自己写js代码进行兼容，不过可以考虑放弃ie6了，应该没人再用了吧？

简单纯css菜单

ul,li{list-style:none;margin:0px;padding:0px}

ul.menu li{margin-left:10px;float:left;position:relative;line-height:20px}/*注意调整这个样式及 ul.menu li ul这个样式的top以便兼容ie7，要不ie7会覆盖父菜单。top介于0~line-height之间的值，自己注意修改不遮盖住就行*/

ul.menu li ul{margin-left:0px;float:none;position:absolute;left:0px;background:#eee;width:100px;top:19px}

ul.menu li ul li{margin-left:0px;float:none;}

ul.menu li:hover ul{display:block;}

ul.menu li ul{display:none}