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>
