纯CSS制作的下拉菜单,效果清爽,代码简单明了。如下图:
具体代码如下:
纯CSS下拉菜单
#menu_yhm ul{margin:0px; padding:0px;}
#menu_yhm ul li{float:left; display:inline; font:12px 宋体; height:30px; width:100px; list-style-type:none;}
#menu_yhm ul li a{color:#FFF; text-decoration:none; line-height:29px; width:91px; margin:0px; padding:0px 0px 0px 8px; display:block; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; background:#808080;}
#menu_yhm ul li ul li{height:25px;}
#menu_yhm ul li ul li a{background:#666; line-height:24px;}
#menu_yhm ul li a:hover{background:#666;}
#menu_yhm ul li ul{visibility:hidden;}
#menu_yhm ul li:hover ul{visibility:visible;}
#menu_yhm ul li ul li a:hover{background:#333;}
菜单一菜单二子菜单一子菜单二子菜单三菜单三菜单四子菜单一子菜单二子菜单三菜单五