HTML 实现导航栏带有子列表

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26841579/article/details/80670041

这段时间，在学习前端，特此做个笔记。

 <!--导航栏-->
    <div class="titlediv">
        <img class="logo" src="../res/logo.png">
        <ul class="titlediv_ul">
            <li class="drop-down">
                <a href="#ruanjian"> 电脑软件</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 驱动下载</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 网管租赁</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 软件宝库</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
            <li class="drop-down"><a href="#ruanjian"> 官方论坛</a>
                <ul class="drop-down-content">
                    <li><a href="#">我是1</a></li>
                    <li><a href="#">我是2</a></li>
                    <li><a href="#">我是3</a></li>
                </ul>
            </li>
        </ul>
    </div>

css里面

/*导航栏*/
.titlediv {
    background-color: white;
    height: 60px;
    width: 100%;
    float: left;
    padding: 0px;

    text-align: center; /*字体居中*/
    margin: auto;
}

.logo {
    width: auto;
    float: left;
    height: auto;
    margin-left: 50px;
}

.titlediv_ul {
    list-style-image: url(img/5.jpg);
    list-style-type: none; /*隐藏点*/
    margin: 0;
    margin-left: 100px;
    padding: 0;
    float: left;
}

.titlediv_ul > li {
    /*white-space: nowrap;*/
    /*横向*/
    float: left;
}

.drop-down > a {
    display: block; /*设置块级*/
    width: 100px;
    line-height: 60px; /*保证文字垂直居中*/
    font-size: 14px;
    color: #000000;
    text-decoration: none;
}

/*悬浮效果*/
.drop-down > a:hover {
    color: #60baed;
}

/*下拉菜单*/
.drop-down {
    /*position: relative;*/
    /*  white-space: nowrap;!**!*/
}

.drop-down-content {
    padding: 0;
    display: none; /*1 先隐藏*/
}

.drop-down-content > li {
    list-style-type: none; /*去点样式*/
}

.drop-down:hover .drop-down-content {
    display: block; /*2显示*/
    background-color: #60baed;
}

.drop-down-content > li > a {
    display: block; /*设置块级*/
    width: 100px;
    line-height: 60px; /*保证文字垂直居中*/
    font-size: 14px;
    color: #110d06;
    text-decoration: none;
}

.drop-down-content > li > a:hover {
    color: #e5f4fd;

}