<!DOCTYPE html>
<html>
<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>
<style >
*{
margin:0%;
padding: 0%;
}
.contaner{
border: 1px solid white;
width: 100%;
height: 70px;
background-color: #9a3032;
}
.nav{
width: 1300px;
height: 70px;
line-height: 70px;
margin: auto;
}
.nav>div{
margin-left: 28px;
float: left;
padding-left: 15px;
padding-right: 15px;
color: white;
height: 70px;
margin-left: 20px;
line-height: 70px;
position: relative;
}
.nav>div:hover{
color: #9a3032;
background-color: white;
transition: 0.5s;
}
.menu{
width: 300px;
display: none;
position: absolute;
background-color: white;
left: 0px;
}
.nav>div:hover>.menu{
display: block;
}
.menu>ul>li{
color: black;
line-height: 30px;
margin-left: 40px;
font-size: 14px;
list-style: none;
}
.menu>*{
float: left;
}
.menu>ul>li::before{
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #9a3032;
margin-right: 10px;
content: "";
}
</style>
</head>
<body>
<div class="contaner">
<div class="nav">
<div>首页</div>
<div>学校概括
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标语</li>
</ul>
</div>
</div>
<div>组织机构
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>党群机构</li>
<li>行政部门</li>
<li>二级学院</li>
</ul>
</div>
</div>
<div>党群工作
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>党建工作</li>
<li>团委工作</li>
<li>工会工作</li>
</ul>
</div>
</div>
<div>教育教学
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>本科教育</li>
<li>职业教育与继续教育</li>
<li>教研与科研</li>
<li>教学动态</li>
</ul>
</div>
</div>
<div>国际教育
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>国际交流中心</li>
<li>国际教育学院</li>
<li>国际联合培养</li>
<li>英才计划</li>
</ul>
</div>
</div>
<div>校园生活
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>校园设施</li>
<li>教学设施</li>
<li>餐饮服务</li>
<li>住宿服务</li>
<li>网络服务</li>
<li>综合服务</li>
</ul>
</div>
</div>
<div>学生服务
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>学工动态</li>
<li>学生会</li>
<li>学生资助</li>
<li>心理健康</li>
<li>资料下载</li>
</ul>
</div>
</div>
<div>招生就业
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>招生网</li>
<li>就业网</li>
</ul>
</div>
</div>
<div>人才招聘
<div class="menu">
<img src="./img/4.png" alt="">
<ul>
<li>招聘公告</li>
<li>联系我们</li>
</ul>
</div>
</div>
<div>校友会</div>
</div>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
