效果图
<!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>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.topDIV{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;line-height:1.42857143;color:#333;
position:absolute; top:15px; right:20px;
box-sizing:border-box;
}
@media print{ .topDIV :before,:after{color:#000!important;text-shadow:none!important;background:transparent!important;-webkit-box-shadow:none!important;box-shadow:none!important}
.topDIV .table-bordered th,.table-bordered td{border:1px solid #ddd!important}}
.topDIV a{color:#428bca;text-decoration:none}
.topDIV a:hover,a:focus{color:#2a6496;text-decoration:underline}
.topDIV a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.topDIV .container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.topDIV .row{margin-right:-15px;margin-left:-15px}
.topDIV .caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
.topDIV .dropdown{position:relative}
.topDIV .dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
.topDIV .dropdown-menu.pull-right{right:0;left:auto}
.topDIV .dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}
.topDIV .dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}
.topDIV .dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{color:#262626;text-decoration:none;background-color:#f5f5f5}
.topDIV .open>.dropdown-menu{display:block}
.topDIV .open>a{outline:0}
.topDIV .dropdown-menu-right{right:0;left:auto}
.topDIV .dropdown-menu-left{right:auto;left:0}
.topDIV .dropdown-submenu {
position: relative;
}
.topDIV .dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.topDIV .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.topDIV .dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.topDIV .dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.topDIV .dropdown-submenu.pull-left {
float: none;
}
.topDIV .dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.topDIV .nav2{padding-left:0;margin-bottom:0;list-style:none}
.topDIV .nav2>li{position:relative;display:block}
.topDIV .nav2>li>a{position:relative;display:block;padding:10px 15px}
.topDIV .nav2>li>a:hover,.nav2>li>a:focus{text-decoration:none;background-color:#eee}
.topDIV .navbar{position:relative;
/*min-height:50px;margin-bottom:20px;*/
border:1px solid transparent;
height: 35px;
}
@media (min-width:768px){.topDIV .navbar{border-radius:4px}}
.topDIV .navbar-fixed-top{top:0;border-width:0 0 1px}
.topDIV .navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}
.topDIV .navbar-brand{float:left;height:35px;padding:10px 10px;font-size:16px;line-height:20px}
.topDIV .navbar-brand:hover,.navbar-brand:focus{text-decoration:none}
.topDIV .navbar-brand>img{display:block}
.topDIV .navbar-nav{margin:7.5px -15px}
.topDIV .navbar-nav>li>a{line-height:10px}
.topDIV .dropdown-toggle{
height: 5px;
}
@media (max-width:767px){
.topDIV .navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}
.topDIV .navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:5px 15px 5px 25px}
.topDIV .navbar-nav .open .dropdown-menu>li>a{line-height:20px}
.topDIV .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus{background-image:none}}
@media (min-width:768px){
.topDIV .navbar-nav{float:left;margin:0}
.topDIV .navbar-nav>li{float:left}
.topDIV .navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}
.topDIV .navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}
@media (max-width:767px){
.topDIV .navbar-form .form-group{margin-bottom:5px}
.topDIV .navbar-form .form-group:last-child{margin-bottom:0}}
@media (min-width:768px){
.topDIV .navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}
.topDIV .navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.topDIV .navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{border-bottom-right-radius:0;border-bottom-left-radius:0}
.topDIV .navbar-btn{margin-top:8px;margin-bottom:8px}
.topDIV .navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}
.topDIV .navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}
.topDIV .navbar-text{margin-top:15px;margin-bottom:15px}
@media (min-width:768px){
.topDIV .navbar-text{float:left;margin-right:15px;margin-left:15px}}
@media (min-width:768px){
.topDIV .navbar-left{float:left!important}
.topDIV .navbar-right{float:right!important;margin-right:-15px}
.topDIV .navbar-right~.navbar-right{margin-right:0}}
.topDIV .navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}
.topDIV .navbar-default .navbar-brand{color:#777}
.topDIV .navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#5e5e5e;background-color:transparent}
.topDIV .navbar-default .navbar-text{color:#777}
.topDIV .navbar-default .navbar-nav>li>a{color:#777}
.topDIV .clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after{display:table;content:" "}
.topDIV .clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-footer:after{clear:both}
</style>
</head>
<body>
<div class="topDIV">
<div class="navbar navbar-default container-fluid" role="navigation">
<ul class="nav2 navbar-nav">
<li onclick="refresh(1)"><a href="#" class="dropdown-toggle">demo1</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
demo2 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown">
demo21</a>
<ul class="dropdown-menu">
<li><a href="#">demo211</a></li>
<li class="divider"></li>
<li><a href="#">demo212</a></li>
<li class="divider"></li>
<li><a href="#">demo213</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="#">demo22</a></li>
<li class="divider"></li>
<li><a href="#">demo23</a></li>
</ul>
</li>
<li><a href="#" class="dropdown-toggle">demo3</a></li>
<li><a href="#" class="dropdown-toggle">demo4</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
demo5 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">demo51</a></li>
<li class="divider"></li>
<li><a href="#">demo52</a></li>
<li class="divider"></li>
<li><a href="#">demo53</a></li>
</ul>
</li>
<li><a href="#" class="dropdown-toggle">demo6</a></li>
<li><a href="#" class="dropdown-toggle">demo7</a></li>
</ul>
<div class="navbar-header">
<a class="navbar-brand menuspan" href="#" ></a>
</div>
</div>
</div>
</body>
</html>