![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
HTML怎么做这个下拉菜单
2023-04-03 · 百度认证:重庆猪八戒网络有限公司官方账号
![](https://wyw-base.cdn.bcebos.com/pc-content/follow.gif)
select标签实现。注:如果是联动下拉菜单的话,需要通过js动态处理select中的option纯css三级下拉菜单,下面是样式表
/*commonstyling*/
.menu{font-family:arial,sans-serif;width:750px;position:relative;margin:0;font-size:11px;margin:50px0;}
.menuullia,.menuullia:visited{display:block;text-decoration:none;color:#000;width:104px;height:20px;text-align:center;color:#fff;border:1pxsolid#fff;background:#710069;line-height:20px;font-size:11px;overflow:hidden;}
.menuul{padding:0;margin:0;list-style-type:none;}
.menuulli{float:left;margin-right:1px;position:relative;}
.menuulliul{display:none;}
/*specifictononiebrowsers*/
.menuulli:hovera{color:#fff;background:#36f;}
.menuulli:hoverul{display:block;position:absolute;top:21px;left:0;width:105px;}
.menuulli:hoverullia.hide{background:#6a3;color:#fff;}
.menuulli:hoverulli:hovera.hide{background:#6fc;color:#000;}
.menuulli:hoverulliul{display:none;}
.menuulli:hoverullia{display:block;background:#ddd;color:#000;}
.menuulli:hoverullia:hover{background:#6fc;color:#000;}
.menuulli:hoverulli:hoverul{display:block;position:absolute;left:105px;top:0;}
.menuulli:hoverulli:hoverul.left{left:-105px;}
![](https://ecmc.bdimg.com/public03/b4cb859ca634443212c22993b0c87088.png)
2024-08-21 广告
广告 您可能关注的内容 |