主导航栏下拉菜单
代码：
<!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>运行效果：
文章来源: 主导航栏下拉菜单