三级导航纯CSS
2015-06-24 18:07
519 查看
<!DOCTYPE html> <html> <head> <title>test</title> <style type = "text/css"> /*设置通配符样式*/ *{ margin:0; padding:0; } body{ font-size:12px; } ul{ list-style:none; } a{ text-decoration:none; } /*设置二级导航样式*/ .nav { width:500px; height:30px; background-color:#b4b4b4; /*导航栏居中*/ margin:auto; } .nav ul li { width:100px; height:30px; float:left; position:relative; } .nav ul li a { display:block; width:96px; border:2px solid gray; height:26px; line-height:26px; text-align:center; } .nav ul li a:hover { background-color:yellow; } /*设置一级导航样式*/ .nav ul li ul{ display:none; } .nav ul li:hover ul{ display:block; width:100px; position:absolute; top:30px; left:0; background-color:white; } .nav ul li:hover ul li a{ display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; } .nav ul li:hover ul li a:hover{ background-color:orange; } /*设置三级导航样式*/ .nav ul li:hover ul li ul { display:none; } .nav ul li:hover ul li:hover ul{ display:block; width:100px; position:absolute; top:0px; left:100px; background-color:#b4b4b4; } .nav ul li:hover ul li:hover ul li { width:100px; height:30px; } .nav ul li:hover ul li:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; } .nav ul li:hover ul li:hover ul li a:hover { background-color:#00CC00; } .nav ul li:hover ul .nav_jw ul { display:none; } .nav ul li:hover ul .nav_jw:hover ul{ display:block; width:100px; position:absolute; top:0px; left:-100px; background-color:#b4b4b4; } .nav ul li:hover ul .nav_jw:hover ul li { width:100px; height:30px; } .nav ul li:hover ul .nav_jw:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; } .nav ul li:hover ul .nav_jw:hover ul li a:hover { background-color:#00CC00; } </style> </head> <body> <div class = "nav"> <ul> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
相关文章推荐
- js 修改css属性值
- CSS字体
- 最新的css3动画按钮效果
- CSS3 制作网格动画效果
- 超炫的 CSS3 页面切换动画效果
- css sprites-简单实例
- css sprites介绍
- 使用CSS实现outline切换的动画效果
- 旋转的太极
- iPhone和ipad去掉按钮默认样式
- css 填坑常用代码分享
- 应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容
- CSS3手风琴效果
- 去除input[type=number]的默认样式
- 初始化css
- CSS控制checkbox样式
- 收缩菜单 css变样
- CSS3前端开发中需要用到的变换矩阵
- (三)css之浮动&定位
- css字体属性相关。