关于下拉二级菜单

Posted on In Views: Word count in article: 4.4k Reading time ≈ 4 mins.

第七次前端作业，要求做一个下拉二级菜单，本次工程采用html+css完成

分别展示html和css的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="aaaa.css">
    <!-- <link rel="stylesheet" href="reset.css"> -->
    <style>
        *{
            list-style: none;
            text-decoration: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="topmenu">
        <ul class="nav">
            <li class="nav-container">
                <a href="#">首页</a>
                <ul class="nav-list">
                    <li><a href="#">教育动态</a></li>
                    <li><a href="#">学术动态</a></li>
                    <li><a href="#">学生动态</a></li>
                    <li><a href="#">通知公告</a></li>
                    <li><a href="#">信息公开</a></li>
                </ul>
            </li>
            <li class="nav-container">
                <a href="#">学院概况</a>
                <ul class="nav-list">
                    <li><a href="#">院长寄语</a></li>
                    <li><a href="#">学院简介</a></li>
                    <li><a href="#">历史沿革</a></li>
                    <li><a href="#">学院机构</a></li>
                    <li><a href="#">校园印象</a></li>
                </ul>
            </li><li class="nav-container">
                <a href="#">教职员工</a>
                <ul class="nav-list">
                    <li><a href="#">专任教师</a></li>
                    <li><a href="#">实验技术人员</a></li>
                    <li><a href="#">行政人员</a></li>
                    <li><a href="#">离退休</a></li>
                    <li><a href="#">招聘信息</a></li>
                </ul>
            </li><li class="nav-container">
                <a href="#">学生工作</a>
                <ul class="nav-list">
                    <li><a href="#">本科生工作</a></li>
                    <li><a href="#">研究生工作</a></li>
                    <li><a href="#">共青团</a></li>
                    <li><a href="#">学生会</a></li>
                    <li><a href="#">研究生会</a></li>
                </ul>
            </li><li class="nav-container">
                <a href="#">科学研究</a>
                <ul class="nav-list">
                    <li><a href="#">学术活动</a></li>
                    <li><a href="#">科研平台</a></li>
                    <li><a href="#">研究方向</a></li>
                    <li><a href="#">重大研究</a></li>
                    <li><a href="#">科研成果</a></li>
                </ul>
            </li>            
        </ul>
    </div>
</body>
</html>

css代码

.topmenu{
    width: 100%;
    height: 50px;
    /* background: whitesmoke; */
    background: lightgrey;
}
/*hover是来设置鼠标的属性*/
.topmenu .nav .nav-container{
    float: left;
    /* left: 300px;
    position: relative; */
    background: lightgrey;
    text-align: center;
    width: 155px;
    /* border-right: solid 2px #fff; */
}
a {
    line-height: 50px;
    color: #fff;
}
.topmenu .nav .nav-container .nav-list {
    display: none;
    /*一级菜单的属性，不显示二级内容*/
}
.topmenu .nav .nav-container:hover .nav-list {
    display: list-item;
    /*当鼠标停留在相关标签上，展开二级菜单*/
}
/* 
.topmenu .nav-container:hover .nav-list{
    display: list-item;
	这种写法也行，一定要.topmenu .nav-container:hover .nav-list
	不然鼠标指针停留在标签上无反应
在设置颜色时，注意颜色不要冲突了
*/
.topmenu li:hover {
    background: lightskyblue;
}