纯CSS实现三级导航下拉菜单-css教程-PHP中文网

首页

web前端

css教程

纯CSS实现三级导航下拉菜单

阿神

Nov 08, 2016 pm 03:02 PM

<!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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn