首页 文章页

我不想说话

CSS写二级导航栏效果
发布时间:2018-08-21 22:16:55 已阅读:   
今天有朋友问我二级导航栏怎么写,我说这么简单你不会吗。

软磨硬泡让我给写了个最简单的。纯CSS效果


鼠标放在一级导航上面后,二级导航显示。



html代码如下:

 <ul class="nav">
        <li><a href=/"/index.html>
            <ul class="navboy">
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
            </ul>
        </li>
        <li><a href=/"/index.html>
            <ul class="navboy">
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
            </ul>
        </li>
        <li><a href=/"/index.html>
            <ul class="navboy">
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
            </ul>
        </li>
        <li><a href=/"/index.html>
            <ul class="navboy">
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
                <li><a href=/"/index.html>
            </ul>
        </li>
    </ul>

CSS代码如下:

*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
ul li{
    list-style: none;
}
.nav>li{
    width: 25%;
    text-align: center;
    height: 30px;
    background-color: aqua;
    float: left;
}
.nav>li>a{
    line-height: 30px;
}
.nav>li ul{
    display: none;
}
.nav>li:hover .navboy{
    display: block;
}

上一篇:自适应css淡入悬停按钮效果 下一篇:CSS中:nth-child的用法