【Web Tricks 7】纯CSS实现的层级(树形)菜单

最近在做后台的导航条的时候,有一个问题是菜单项很多,于是需要做一个层级(树形)

菜单,本来是打算用JS来实现,后来想了想还是去用CSS来实现,这样子对于浏览器的

支持会大一些,而且不会出现那种闪屏现象,好了废话不说,上代码


<style type="text/css">
.menu { display:block; font-family: arial, sans-serif; width:100%; position:fixed; height:auto; background: #3B3B3F;z-index: 5;padding-left: 80px;font-weight: bold;}
.menu ul { padding:0; margin:0; list-style-type: none;}
.menu ul li { float:left; width:131px; background: #3B3B3F;}
.menu ul li.end { height:35px; float:right; width:10px; background: #3B3B3F;}
.menu ul li a, 
.menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:105px; height:35px; color:#2DC5F5; line-height:34px; font-size:14px;background: #3B3B3F;}
.menu ul li.first a, 
.menu ul li.first a:visited {display:block; text-align:center; text-decoration:none; width:110px; he
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值