Question

HTML怎么做这个下拉菜单

Answer 1

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;}