ドロップダウンメニューの効果を実現するには、cssを使用して次のナビゲーションバーを実装します。
コード：
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;
}