二级导航 css

在网上找的,感觉不错,所以进行一下拆解.(明明对方写的挺简单明了的)

首先是html布局

<div class="nav">
        <ul>
            <li>
                <a href="">导航1</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
            <li>
                <a href="">导航2</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
            <li>
                <a href="">导航3</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="a">asdgfsdfhse</div>

就是在原有的一级导航的li里追加一套ul>li.

至于需要几个菜单,就加几个li就行.

　　在这顺便一提,为了防止二级栏将下面的内容顶下去,所以需要给追加的ul加一个绝对定位！

然后是css部分，由于多了比较乱，所以一点点的来。

首先，给一级导航布局。

*{margin: 0;padding: 0;}
        body{padding: 20px;}
        .nav{
            overflow: hidden;
        }
        .nav ul li{
            list-style-type: none;
            float: left;
            background: #ccc;
            /* padding: 10px; */            
        }
        .nav ul li a{
            text-decoration: none;
            display: block;
            padding: 10px;
        }
        .nav ul li a:hover{
            background: #fff;
            color: #f00;
        }

比较难看，请见谅……

然后就是二级的部分，由于我使用的是后代选择器，即。nav下的所有li都将应用样式，所以需要将二级栏的浮动float: none;取消

当然，如果想实现横条的效果，那就不需要了。

.nav ul li ul li{
            float: none;
        }
        .nav ul li ul{
            position: absolute;
            display: none;
        }
        .nav ul li:hover ul{
            display: block;
        }

将最里面的li取消浮动，使其纵向排列。

扫描二维码关注公众号，回复： 1472700 查看本文章

然后将最里面的ul隐藏，使用display: none;

而position: absolute;的这个绝对定位，则是避免显示二级栏时，将下面的内容顶下去。

display: block;在使用过display: none;后使用的话，将表示显示之前所隐藏的那个ul。

当然,要显示也得在鼠标悬浮的时候显示,所以就通过.nav ul li:hover ul{}这种方式显示出二级栏.

这是全部,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        body{padding: 20px;}
        nav{　　
            width: 100%;
            background: #284f86;
            overflow: hidden;
        }
        .nav{
            overflow: hidden;
        }
        .nav ul li{
            list-style-type: none;
            float: left;        
        }
        .nav ul li a{
            text-decoration: none;
            display: block;
            padding: 10px 20px;
            color: #fff;
        }
        .nav ul li a:hover{
            background: #fff;
            color: #f00;
            border-radius: 5px;
        }
        .nav ul li ul li{
            float: none;
            background: #284f86;
        }
        .nav ul li ul{
            position: absolute;
            display: none;
        }
        .nav ul li:hover ul{
            display: block;
        }
        .a{
            width: 100%;
        }
    </style>
</head>
<body>
<nav>
    <div class="nav">
        <ul>
            <li>
                <a href="">导航1</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
            <li>
                <a href="">导航2</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
            <li>
                <a href="">导航3</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
            <li>
                <a href="">导航4</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
            <li>
                <a href="">导航5</a>
                <ul>
                    <li><a href="">导航二1</a></li>
                    <li><a href="">导航二2</a></li>
                    <li><a href="">导航二3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>
    <div class="a">asdgfsdfhse</div>
</body>
</html>

猜你喜欢