模拟一些网页首页导航条,实现下拉菜单效果

使用css实现如下一个导航条,实现下拉菜单效果:

模拟一些网页首页导航条,实现下拉菜单效果_第1张图片
代码:
html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS作业</title>
    <link type="text/css" rel="stylesheet" href="css/stylecss.css">
</head>
<body>
<ul class="nav">
    <li><a href="#">首页</a></li>
</ul>
<ul class="nav">
    <li><a href="#">学院概况</a></li>
    <ul class="plat">
        <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>
        <li><a href="#">联系我们</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">学院动态</a></li>
    <ul class="plat">
        <li><a href="#">疫情防控</a></li>
        <li><a href="#">学院新闻</a></li>
        <li><a href="#">通知公告</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">党建思政</a></li>
    <ul class="plat">
        <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>
</ul>
<ul class="nav">
    <li><a href="#">师资队伍</a></li>
    <ul class="plat">
        <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>
        <li><a href="#">工程师或实验师</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">人才培养</a></li>
    <ul class="plat">
        <li><a href="#">本科生教育</a></li>
        <li><a href="#">研究生教育</a></li>
        <li><a href="#">博士后流动站</a></li>
        <li><a href="#">教学资源</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">招生招聘</a></li>
    <ul class="plat">
        <li><a href="#">招生信息</a></li>
        <li><a href="#">招聘信息</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">科学研究</a></li>
    <ul class="plat">
        <li><a href="#">科研机构</a></li>
        <li><a href="#">科研动态</a></li>
        <li><a href="#">学术讲座</a></li>
        <li><a href="#">学术会议</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">社会服务与培训</a></li>
    <ul class="plat">
        <li><a href="#">班级动态</a></li>
        <li><a href="#">培训环境介绍</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</ul>
<ul class="nav">
    <li><a href="#">学生天地</a></li>
    <ul class="plat">
        <li><a href="#">党建思政</a></li>
        <li><a href="#">团学工作</a></li>
        <li><a href="#">科创竞赛</a></li>
        <li><a href="#">就业创业</a></li>
    </ul>
</ul>
</body>
</html>

stylecss.css文件:


*{
    padding: 0;
    margin: 0;
}
ul,a {
    font-size: 25px;
    list-style: none;
    text-decoration: none;
    background-color: purple;
    color: white;
    width: 180px;
    height: 40px;
    text-align: center;
}
.nav{
    border-right: 1px solid blue;
}

li:last-child {
    border-right: none;
}
ul:first-child {
    margin-left: 120px;
}
a{
    display: block;
    margin-top: 0px;
}

.plat{
    display: none;
    margin-left: 20px;
}
.nav{
    float: left;
}
.nav:hover .plat{
    display: block;
    clear: both;

}
.nav li:hover>a {
    background-color:mediumpurple;
}
.plat li:hover>a{
    background-color:mediumpurple;
}

你可能感兴趣的:(html)