3단계 탐색 드롭다운 메뉴를 구현하는 순수 CSS-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

3단계 탐색 드롭다운 메뉴를 구현하는 순수 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으로 문의하세요.

관련 기사