css淘宝下拉菜单,纯css打造最简洁下拉菜单-无js-非常实用

￡神魔★判官ぃ 2022-08-29 01:30 236阅读 0赞

先上图：(点击图片可到楼主的个人网站)

47d08ebf352d491acc7d2dc6aa768c80.gif

样式部分：

分全局，一级菜单和二级菜单。初始化二级的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显示出来。

  • 首页

  • 客户

    • 11
    • 22
    • 33

  • 车辆

    • 44
    • 55
    • 66

发表评论

表情：
评论列表 （有 0 条评论，236人围观）

还没有评论，来说两句吧...

相关阅读