近期一系統中需要一個二級下拉菜單，由於需要根據UI的設計稿來實現，通過嘗試了使用bootstrap，主要使用list-group和collapse來完成，但是發現樣式需要較大的調整，而且後期樣式達不到UI的要求，索性動手寫了一個菜單，基於jquery和css，效果圖如下：
話不多說，直接上代碼:
1、界面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery、css下來菜單</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<link href="font-awesome/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="jquery-1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="wrap">
<ul class="indexmenu" style="width:100%">
<li><a class="menutitle mapIcon" href="javascript:void(0)"><span class="title">電子地圖</span><i class="pull-right fa fa-angle-down"></i></a>
<ul style="display:none">
<li><a href="javascript:void(0)" >地圖</a></li>
<li><a href="javascript:void(0)" >影像對比</a></li>
</ul>
</li>
<li>
<a class="menutitle dataManager" href="javascript:void(0)"><span class="title">數據管理</span><i class="pull-right fa fa-angle-down"></i></a>
<ul style="display:none">
<li><a id="keyquery" href="javascript:void(0)">關鍵字查詢</a></li>
<li><a href="javascript:void(0)">條件查詢</a></li>
<li><a href="javascript:void(0)">信息錄入</a></li>
</ul>
</li>
<li>
<a class="menutitle statisticIcon" href="javascript:void(0)"><span class="title">統計報表</span><i class="pull-right fa fa-angle-down"></i></a>
<ul style="display:none">
<li><a href="javascript:void(0)" >統計概覽</a></li>
<li><a href="javascript:void(0)">分鄉鎮統計</a></li>
<li><a href="javascript:void(0)">分村統計</a></li>
<li><a href="javascript:void(0)" >分類型統計</a></li>
<li><a href="javascript:void(0)">房屋用途統計</a></li>
</ul>
</li>
<li>
<a class="menutitle inspectionIcon" href="javascript:void(0)"><span class="title">移動巡檢</span><i class="pull-right fa fa-angle-down"></i></a>
<ul style="display:none">
<li><a href="javascript:void(0)">移動巡查</a></li>
</ul>
</li>
<li>
<a class="menutitle userIcon" href="javascript:void(0)"><span class="title">用戶中心</span><i class="pull-right fa fa-angle-down"></i></a>
<ul style="display:none">
<li><a href="javascript:void(0)" >密碼修改</a></li>
<li><a href="javascript:void(0)" >用戶管理</a></li>
<li><a href="javascript:void(0)" >角色管理</a></li>
</ul>
</li>
<li>
<a class="menutitle dictIcon" href="javascript:void(0)"><span class="title">數據字典</span><i class="pull-right fa fa-angle-down"></i></a>
<ul style="display:none">
<li><a href="javascript:void(0)">數據字典編輯</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$('.menutitle').click(function (event) {
if ($(this).next().css("display") == "none") {
$(this).parent("li").siblings("li").children("a").removeClass("open");
$(this).addClass("open");
$(this).next().slideDown(100)
$(this).parent("li").siblings("li").children("ul").slideUp(100);
}
else {
$(this).removeClass("open");
$(this).next().slideUp(100);
}
})
$('.indexmenu li ul li a').focus(function () {
$(this).parent("li").addClass("changeborder");
})
$('.indexmenu li ul li a').blur(function () {
$(this).parent("li").removeClass("changeborder");
})
</script>
</body>
</html>
2、style.css
@charset "utf-8";
/* CSS Document */
* {
font-family:Microsoft YaHei;
}
.wrap {
width:220px;
margin:10px;
border:3px solid #4077E2;
border-radius:15px;
}
.indexmenu {
margin:20px 0px 5px 5px;
padding:0;
padding-bottom:20px;
}
.indexmenu li {
list-style:none;
}
.indexmenu > li {
margin-bottom:15px;
}
.indexmenu li a {
color:#1775be;
width:100%;
height:30px;
line-height:30px;
font-size:18px;
font-weight:bold;
font-family:Microsoft YaHei;
}
.indexmenu li ul {
padding:0;
}
.indexmenu li ul li{
margin-left:70px;
margin-right:20px;
}
.indexmenu li ul li a {
font-size:15px;
font-weight:normal;
}
.indexmenu li a:link,a:visited {
text-decoration:none;
}
.indexmenu li ul li a:focus{
color:red;
}
.changeborder {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.indexmenu i.fa {
line-height:28px;
}
.menuitems {
display:none
}
a i {
margin-right:20px;
margin-left:20px;
}
a.open > .fa-angle-down:before {
content: "\f106";
}
a > fa-angle-up:before {
content: "\f107";
}
.title {
margin-left:70px;
}
ul.firstmenu {
margin:20px 0 0 0;
}
ul.firstmenu li {
list-style:none;
height:30px;
line-height:30px;
font-size:18px;
font-weight:bold
}
ul.firstmenu li a:link,a:visited{
text-decoration:none;
}
ul.firstmenu li a:focus {
color:red;
}
.mapIcon {
background:url(Images/mapicon.png) no-repeat 20px center;
background-size:contain;
}
.dataManager {
background:url(Images/datamanager.png) no-repeat 20px center;
background-size:contain;
}
.inspectionIcon {
background:url(Images/inspectionicon.png) no-repeat 20px center;
background-size:contain;
}
.statisticIcon {
background:url(Images/statisticicon.png) no-repeat 20px center;
background-size:contain;
}
.userIcon {
background:url(Images/usericon.png) no-repeat 20px center;
background-size:contain;
}
.dictIcon {
background:url(Images/dicticon.png) no-repeat 20px center;
background-size:contain;
}
.btnTitle {
line-height:36px;
margin-right:10px;
font-size:20px;
font-weight:bold;
}
.info {
height:36px;
margin-right:20px;
}
.pull-right {
float: right !important;
}
.topnav a {
opacity:1;
color:white;
width:auto;
text-align:center;
height:36px;
line-height:36px;
}
.topnav span {
line-height:36px;
margin-right:10px;
}
.info span {
line-height:31px;
}
.topnav a:hover{
opacity:1;
background-color:#5694D2;
color:white
}
.choosed {
opacity:1;
background-color:#5694D2;
color:white
}
#west {
width:236px;
background:url("/Images/westbg.png") no-repeat;
background-size:cover;
}完整代碼示例：http://pan.baidu.com/s/1mhWyE4g，密碼：jm4h
GOOD LUCK!!!