先上图：(点击图片可到楼主的个人网站)
样式部分：
分全局，一级菜单和二级菜单。初始化二级的ul 的display 默认是隐藏的。
/*公共全局*/
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
a{ color:#333; text-decoration:none;}
/*一级菜单*/
.nav ul li{ float:left; width:200px; background:#FC0; margin-right:1px; } /*一级菜单宽度改过，下面二级自动继承*/
.nav ul li a{ width:100%; line-height:30px; text-align:center; display:block}
.nav ul li a:hover{ background:#333; color:#fff;}
.nav ul li:hover ul{ display:block; width:100%;} //这句是关键
/*二级菜单*/
.nav ul li ul{ display:none; width:100%;}
.nav ul li ul li a{ float:left; width:100%; height:30px; line-height:30px;}
.nav ul li ul li a,.nav ul li ul li a:visited{}
.nav ul li ul li a:hover{ background:#333; color:#fff;}
结构方面：
二级菜单UL是嵌套在一级的li中。通过样式的hover来实现让它display显示出来。
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
