主导航栏下拉菜单
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主导航栏二级菜单</title>
<style type="text/css">
/*主导航栏二级菜单*/
.dropbtn {
width:90px;
height:50px;
background-color: #4CAF50;
color: white;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 160px;}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.btn{list-style-type:none;
float:left;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="btn"><div class="dropdown">
<button class="dropbtn">学校概况</button>
<div class="dropdown-content">
<a href="#">学院简介</a>
<a href="#">机构设置</a>
<a href="#">学院领导</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">师资队伍</button>
<div class="dropdown-content">
<a href="#">信息与计算科学系</a>
<a href="#">光电信息系</a>
<a href="#">电子信息系</a>
<a href="#">应用统计系</a>
<a href="#">数学教学部</a>
<a href="#">物理教学部</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">人才培养</button>
<div class="dropdown-content">
<a href="#">本科教育</a>
<a href="#">研究生教育</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">教学工作</button>
<div class="dropdown-content">
<a href="#">教学文件</a>
<a href="#">教学通知</a>
<a href="#">教学活动</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">科研学术</button>
<div class="dropdown-content">
<a href="#">相关文件</a>
<a href="#">科研机构</a>
<a href="#">科研立项</a>
<a href="#">科研成果</a>
<a href="#">学术活动</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">学团工作</button>
<div class="dropdown-content">
<a href="#">本科生工作</a>
<a href="#">研究生工作</a>
</div>
</div>
<li class="btn"><div class="dropdown">
<button class="dropbtn">招生就业</button>
<div class="dropdown-content">
<a href="#">本科生招生</a>
<a href="#">研究生招生</a>
<a href="#">学生就业</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">党建工作</button>
<div class="dropdown-content">
<a href="#">教职工党建</a>
<a href="#">学生党建</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">校友工作</button>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">学风建设</button>
<div class="dropdown-content">
<a href="#">学风动态</a>
<a href="#">学子风采</a>
<a href="#">经验介绍</a>
<a href="#">考研之星</a>
<a href="#">资料下载</a>
</div>
</div>
</li>
<li class="btn"><div class="dropdown">
<button class="dropbtn">下载专区</button>
</div>
</li>
</ul>
</div>
</body>
</html>运行效果：
