html导航简单特效,简单实用的纯CSS实现的横向多级导航特效代码

*{padding: 0; margin: 0; list-style: none;}

.list1 > a{text-decoration: none; color: #fff;}

.list1{position: relative; width: 100px; height: 36px; line-height: 36px; text-align: center; border-bottom: 1px solid #ddd; background: #2144A0;}

.menu1,.menu2{border: 1px solid #ddd; width: 100px; border-bottom: none;}

.menu2{display: none; width: 100px; position: absolute; left: 100px; top: -1px; z-index: 998;}

.list2{border-bottom: 1px solid #ddd;}

.list2 > a{text-decoration: none; color: #999;}

.list1:hover > a{color: #999;}

.list2:hover a{color: blue;}

.list1:hover .menu2{display: block;}

• AAAAA

  • 网页特效
  • 网页模板
  • 网页教程
• 广告代码
• 特效模板

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]