/* 下拉菜单 */ #navmenu { width:1160px; height:32px; background:#333; position:relative; z-index:99; margin:30px auto; } #navmenu .menuhome { margin-left:16px } #navmenu li { position:relative; display:block; float:left; cursor:pointer } #navmenu .tablink { position:relative; padding:1px 15px; line-height:31px; display:block; height:31px; color:#fff; font-size:14px; z-index:99; float:left } #navmenu .tablink a { line-height:30px; color:#FFF; text-decoration:none } #navmenu li:hover { background:#FFF } #navmenu li:hover .tablink { color:#357d13; border:1px solid #629d2a; border-bottom:0; padding:0 15px; text-decoration:none } #navmenu li:hover .tablink a { color:#357d13 } #navmenu .dropdown div { display:none } #navmenu .dropdown:hover div { position:absolute; display:block; margin-left:-1px; top:32px; left:1px; z-index:9 } #navmenu .subnav { width:120px } #navmenu .subnav a { padding:4px 0 4px 15px; line-height:16px; width:70px; display:block; white-space:nowrap; color:#333; float:left } #navmenu .subnav:hover { text-decoration:underline; color:#080 } #navmenu .subnav { background:#FFF; border:1px solid #390; border-top:0; padding:8px; }
这是一款最简单的下拉菜单,只用到了html+css,没有特殊的效果,本着实用好用够用的原则制作,兼容火狐、谷歌、ie7+等所有主流浏览器。