HTML制作导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>西安工商学院</title>
<style>
* {border: 1px solid black;
padding: 0;
margin: 0;
}
.nav{
width: 1020px;
line-height: 70px;
margin-left: auto;
margin-right: auto;
}
.constaner {
height: 70px;
width: 100%;
background-color: #9a3032;
}
.nav>div {
height: 70px;
text-align: center;
line-height: 70px;
float: left;
color: white;
margin-left: 10px;
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.nav>div:hover {
background-color: white;
color: #9a3032;
}
.nav>div:hover>div {
display: block;
}
.menu>* {
float: left;
}
.menu>div>ul>li {
margin-left: 40px;
line-height: 48px;
}
.menu {
width: 400px;
background-color: white;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div class="constaner">
<div class="nav">
<div>首页<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>西安工商学院</li>
<li>全球一流大学</li>
<li>教资雄厚</li>
<li>人才济济</li>
<li>清华得不到的学生</li>
</ul>
</div>
</div>
</div>
<div class="hometage">学校概况
<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>组织机构<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>党群工作<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>教育教学<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>国际教育<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>校园生活<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>学生服务<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>招生就业<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>人才招聘<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
<div>校友会<div class="menu">
<div><img src="./img/西工商.png" alt=""></div>
<div>
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
