Home > Article > Web Front-end > Pure CSS to implement three-level navigation drop-down menu

Pure CSS to implement three-level navigation drop-down menu

阿神Original: 2016-11-08 15:02:36975browse

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analysis of the most commonly used CSS selectorsNext article：Analysis of the most commonly used CSS selectors

See more

Pure CSS to implement three-level navigation drop-down menu

Related articles