HTML+CSS实现导航栏
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 初始化 */
* {
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
font-family: 'Microsoft Yahei', '微软雅黑', 'Simsun', '宋体', 'Arial', sans-serif;
}
img {
border: 0;
}
a {
color: #fff;
text-decoration: none;
outline: none;
}
ol,
ul,
li {
list-style: none;
}
.head-nav {
width: 100%;
height: 64px;
background: #01153a;
}
.head-nav-con {
padding-left: 50px;
width: 100%;
height: 60px;
margin: auto;
}
.head-nav-con ul li{
/* margin-left: 50px; */
width: 113px;
float: left;
font-size: 16px;
text-align: center;
}
/* .head-nav-con ul a li:hover {
color: yellow;
} */
.head-nav-con ul a {
display: block;
text-decoration: none;
text-align: center;
line-height: 60px;
color: #c3b274;
}
.head-nav-con .drop-down-content a{
color: white;
}
.head-nav-con .drop-down {
position: relative;
}
.head-nav-con .drop-down-content {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background: #6e3a5e;
}
.head-nav-con .drop-down-content li:hover > a {
background-color: #123877;
}
.head-nav-con .drop-down:hover .drop-down-content {
display: block;
}
.head-nav-con .drop-down-2 {
position: relative;
}
.head-nav-con .drop-down-content-2 {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background-color: #6e3a5e;
right: -113px;
top: 0;
}
.head-nav-con .drop-down-content-2 > li {
float: none;
background-color: #6e3a5e;
}
.head-nav-con .drop-down-content-2 li:hover a {
background-color: #123877;
}
.head-nav-con .drop-down-2:hover .drop-down-content-2 {
display: block;
}
#teshu{
width: 162px;
}
#teshu ul li{
width: 162px;
height: 51px;
/* margin-top: -6px; */
line-height: initial;
}
.fi{
font-size: 13px;
height: 50px;
/* line-height: initial; */
line-height: 0px;
text-align: initial;
/* border: red 1px solid; */
}
</style>
</head>
<body>
<div class="header">
<div class="head-nav">
<div class="head-nav-con clearFloat">
<!-- <div id="cssmenu"> -->
<div id="menu-button"></div>
<ul>
<!-- 首页 -->
<li><a href="">首页</a>
</li>
<!-- 学院概况 -->
<li class="drop-down"><a href="">学院概况</a>
<ul class="drop-down-content">
<li><a href="">学院简介</a>
</li>
<li><a href="">院长寄语</a>
</li>
<li><a href="">学院领导</a>
</li>
<li class="drop-down-2"><a href="">组织机构</a>
<ul class="drop-down-content-2">
<li><a href=".">教学单位</a>
</li>
<li><a href="">合作教育中心</a>
</li>
<li><a href="">教授委员会</a>
</li>
</ul>
</li>
<li><a href="">校友风采</a>
</li>
<li><a href="">联系我们</a>
</li>
</ul>
</li>
<!-- 学院动态 -->
<li class="drop-down"><a href="">学院动态</a>
<ul class="drop-down-content">
<li><a href="">疫情防控</a>
</li>
<li><a href="">学院新闻</a>
</li>
<li class="drop-down-2"><a href="">通知公告</a>
<ul class="drop-down-content-2">
<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>
<li><a href="">公开</a>
</li>
<li><a href="">党建</a>
</li>
<li><a href="">外事</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- 党建思政 -->
<li class="drop-down"><a href="">党建思政</a>
<ul class="drop-down-content">
<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="drop-down"><a href="">师资队伍</a>
<ul class="drop-down-content">
<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>
</li>
<!-- 人才培养 -->
<li class="drop-down"><a href="">人才培养</a>
<ul class="drop-down-content">
<li><a href="">本科生教育</a>
</li>
<li><a href="">研究生教育</a>
</li>
<li><a href="">博士后流动站</a>
</li>
<li><a href="">教学资源</a>
</li>
</ul>
</li>
<!-- 招生招聘 -->
<li class="drop-down"><a href="">招生招聘</a>
<ul class="drop-down-content">
<li><a href="">招生信息</a>
</li>
<li><a href="">招聘信息</a>
</li>
</ul>
</li>
<!-- 科学研究 -->
<li class="drop-down"><a href="">科学研究</a>
<ul class="drop-down-content">
<li><a href="">科研机构</a>
</li>
<li><a href="">科研动态</a>
</li>
<li><a href="">学术讲座</a>
</li>
<li><a href="">学术会议</a>
</li>
</ul>
</li>
<!-- 社会服务与培训 -->
<li class="drop-down" id="teshu"><a href="">社会服务与培训</a>
<ul class="drop-down-content">
<li><a href="" class="fi">社会服务与培训中心办公室</a>
</li>
<li><a href="" class="fi">社会服务与培训支撑平台</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>
</li>
<!-- 学生天地 -->
<li class="drop-down"><a href="">学生天地</a>
<ul class="drop-down-content">
<li><a href="">党建思政</a>
</li>
<li><a href="">团学工作</a>
</li>
<li class="drop-down-2"><a href="">科创竞赛</a>
<ul class="drop-down-content-2">
<li><a href="">赛事通知</a>
</li>
<li><a href="">赛事培训</a>
</li>
<li><a href="">赛事速递</a>
</li>
</ul>
</li>
<li class="drop-down-2"><a href="">就业创业</a>
<ul class="drop-down-content-2">
<li><a href="">实习实训</a>
</li>
<li><a href="">校园招聘</a>
</li>
<li><a href="">就业创业指导</a>
</li>
</ul>
</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>
<li><a href="">政策文件</a>
</li>
</ul>
</li>
<!-- 工会工作 -->
<li class="drop-down"><a href="">工会工作</a>
<ul class="drop-down-content">
<li><a href="">工会委员</a>
</li>
<li><a href="">工会通知</a>
</li>
<li><a href="">工会活动</a>
</li>
</ul>
</li>
</ul>
<!-- </div> -->
</div>
</div>
</div>
</body>
</html>
