Add the code to the JSP:
. navbar. Nav > li:hover. dropdown-menu {
Display:block;
}
The entire code looks like this:
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "Utf-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Innovation Laboratory College </title>
<link rel= ' stylesheet ' id= ' bootstrap-css ' href= './css/bootstrap.min.css ' type= ' text/css ' rel= ' stylesheet '/>
<link rel= ' stylesheet ' id= ' fontawesome-css ' href= './css/ui/font-awesome/css/font-awesome.min.css ' type= ' text/ CSS ' media= ' all '/>
<link rel= ' stylesheet ' id= ' flexslider-css ' href= './css/ui/flexslider/flexslider.css ' type= ' text/css ' media= ' all ' />
<link rel= ' stylesheet ' id= ' zan-css ' href= './css/ui/css/zan.css ' type= ' text/css ' rel= ' stylesheet '/>
<link rel= ' stylesheet ' id= ' custom-css ' href= './css/ui/css/custom.css ' type= ' text/css ' media= ' all '/>
<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<script type= "Text/javascript" charset= "Utf-8" language= "JavaScript" src= "./js/bootstrap.min.js" ></script >
<style type= "Text/css" >
. fontsize
{
font-size:13px;
Color: #fff;
}
. navbar-nav>li>a{
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
}
. navbar. Nav > li:hover. dropdown-menu {
Display:block;
}
. navbar.navbar-inverse{
min-height:40px;
maigin-bottom:10px;
}
. Nav.navbar-nav
{
padding-top:5px;
min-height:40px;
}
. container.clearfix {
Margin-right:auto;
Margin-left:auto;
padding-left:2px;
padding-right:2px;
height:40px
}
</style>
<body style= "margin:0" >
<div class= "Header" >
<a href= "http://www.baidu.com" class= "logo" data-toggle= "animation" ></a>
</div>
<div class= "NavBar navbar-inverse" style= "Border-radius:0px;background-image:url (./images/navbg.gif)" >
<div class= "Container Clearfix" >
<div class= "Navbar-header" >
<button class= "Navbar-toggle" type= "button" data-toggle= "Collapse" data-target= ". Navbar-collapse" >
<span class= "Sr-only" > drop-down box </span>
<span class= "fa fa-reorder fa-lg" ></span>
</button>
</div>
<nav class= "navbar-collapse collapse" style= "Background-image:url (./images/navbg.gif)" >
<ul class= "Nav navbar-nav" >
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style= "margin-right:10px" > <a href= "Http://zanwp.com/zanblog3" class= "fontsize" ><i class= "fa fa-home" ></i> home </a></ Li>
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style= "margin-right : 10px "><a class=" fontsize "><i class=" fa fa-support "></i> College profile </a>
<ul class= "Dropdown-menu" >
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Introduction </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > History </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > College Leadership </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Service guide </a></li>
</ul>
</li>
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style= "margin-right : 10px "><a class=" fontsize "><i class=" FA fa-support "></i> Innovation Practice Class </a>
<ul class= "Dropdown-menu" >
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Electromechanical Practice Class </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Software Engineering Practice Class </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Media Technology Practice Class </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Math Modeling Practice Class </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Entrepreneurship Education Practice Class </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Creative invention Practice Class </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Humanoid robot Practice Class </a></li>
</ul>
</li>
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style= "margin-right : 10px "><a class=" fontsize "><i class=" FA fa-support "></i> Innovation startup Team </a>
<ul class= "Dropdown-menu" >
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Bayern </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Moenchengladbach </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Multi-Special </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Schalke </a></li>
</ul>
</li>
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style= "margin-right:10px" > <a href= "http://www.baidu.com" class= "fontsize" ><i class= "fa fa-home" ></i> Incubator Park </a></li >
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style= "margin-right:10px" > <a href= "http://www.baidu.com" class= "fontsize" ><i class= "FA fa-home" ></i> Innovation and Entrepreneurship information </a></ Li>
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style= "margin-right:10px" > <a href= "http://www.baidu.com" class= "fontsize" ><i class= "fa fa-home" ></i> teaching management </a></li >
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style= "margin-right:10px" > <a href= "http://www.baidu.com" class= "fontsize" ><i class= "fa fa-home" ></i> Party work </a></li >
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style= "margin-right : 10px "><a class=" fontsize "><i class=" fa fa-support "></i> recruitment </a>
<ul class= "Dropdown-menu" >
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Admissions </a></li>
<li class= "Menu-item menu-item-type-post_type menu-item-object-post" ><a href= "#" class= "FontSize" > Recruitment </a></li>
</ul>
</li>
<li class= "Menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style= "margin-right:10px" > <a href= "http://www.baidu.com" class= "fontsize" ><i class= "fa fa-home" ></i> file download </a></li >
</ul>
</nav>
</div>
</div>
</body>
Bootstrap navigation bar mouse hover display drop-down menu