一级下拉菜单html5,织梦纯CSS一级栏目下拉导航菜单代码

织梦html纯CSS一级栏目下拉导航菜单,找了好久没找到满意的,网上的都是从以前DEDECMS5.5版本扒下来的,还要调用JS.整了半天,很多测试调用不出来,我找的这个上纯CSS,不需要修改其他网站文件,现分享给大家。

效果图:

96e89675e7ba12c4eb39f61e6591b4b5.png

样式

body{ font:14px "Microsoft YaHei", Arial,Verdana,tahoma, Srial, helvetica, sans-serif; line-height:1.8; color:#333; background:#fff;}

.menu {height: 40px; background: #4ba036;position: relative; z-index:999;

}

.menu a {

text-decoration: none;display: block; padding: 0 12px; margin-right: 1px; line-height: 40px; font-size: 16px; color: #fff;

}

ul {

margin: 0;

padding: 0;

}

.menu li {

list-style: none;

float: left;

width: 90px;

overflow: visible;

cursor: pointer;

}

ul.level0 {

height: 40px;

overflow: visible;

}

ul.level1, ul.level2, ul.level3 {

width: 90px;

display: none;

}

ul.level2, ul.level3 {

margin: -28px 0 0 90px;

}

ul.level0 > li {

height: 40px;

line-height: 40px;

text-align: center;

background: #4ba036;

}

ul.level1 > li, ul.level2 > li, ul.level3 > li {

height: 40px;

line-height: 40px;

background: #308a1a;

}

ul.level0 > li:hover {

background: #308a1a;

}

ul.level1 > li:hover, ul.level2 > li:hover, ul.level3 > li:hover {

background: #4ba036;

}

ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul {

display: block;

}

调用代码:

喜欢 (1)or分享 (0)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值