Modify CSS:
<Style type = "text/CSS">
. Navbar. Nav> Li. dropdown-menu {
Margin: 0;
}
. Navbar. Nav> Li: hover. dropdown-menu {
Display: block;
}
</Style>
Instance:
<! Doctype HTML>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Bootstrap navigation bar hover the mouse over the drop-down menu </title>
<Link id = "bootstrap_221" rel = "stylesheet" type = "text/CSS" class = "library" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<SCRIPT id = "jquery_172" type = "text/JavaScript" class = "library" src = "http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"> </SCRIPT>
<SCRIPT id = "bootstrap_221" type = "text/JavaScript" class = "library" src = "http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"> </SCRIPT>
<Style type = "text/CSS">
. Navbar. Nav> Li. dropdown-menu {
Margin: 0;
}
. Navbar. Nav> Li: hover. dropdown-menu {
Display: block;
}
</Style>
</Head>
<Body>
<Div class = "Container">
<Div class = "navbar">
<Div class = "navbar-inner">
<Ul class = "nav-pills">
<Li class = "active"> <a href = "#"> Home </a> </LI>
<Li class = "dropdown"> <a href = "#"> SVN <SPAN class = "caret"> </span> </a>
<Ul class = "dropdown-menu">
<Li> <a href = "#"> sub svn1 </a> </LI>
<Li> <a href = "#"> sub svn2 </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> IOS </a> </LI>
<Li> <a href = "#"> VB. NET </a> </LI>
<Li class = "dropdown"> <a href = "#"> JAVA <SPAN class = "caret"> </span> </a>
<Ul class = "dropdown-menu">
<Li> <a href = "#"> sub java1 </a> </LI>
<Li> <a href = "#"> sub Java2 </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> php </a> </LI>
</Ul>
</Div>
</Div>
</Div>
</Body>
</Html>
(Go to) change the bootstrap drop-down menu to hover over