如何在悬停时打开下拉菜单和二级菜单。单击导航栏下拉，我应该在悬停时下拉什么变化。我从w3schools.com上获取了导航栏的代码。它工作正常。但我必须在内部css中添加a.hover或dropdown.hover。那么我在哪里添加它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>UPSC Fever</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
$("#footer").load("footer.html");
$('li.dropdown-submenu').on('click', function (event) {
event.stopPropagation();
if ($(this).hasClass('open')) {
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
</script>
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown()
});
</script>
<style>
.dropdown-submenu {
position: relative;
}
.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;
}
.dropdown-submenu .open > .dropdown-menu {
display: block;
}
.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;
}
.dropdown-submenu .open > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.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;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
visibility: hidden;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #3399ff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
background-color: #ffffff;
margin-bottom: 0;
}
/* Add a gray background color and some padding to the footer */
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<meta name="Slurp" content="noindex">
</head>
<body>
<!-- <div id="mySidenav" class="sidenav" >
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>-->
<div class="jumbotron"> <img src="http://upscfever.com/upsc-fever/assets/images/logo.JPG" alt="LOGO - UPSC Fever" class="img-responsive"
>
<div class="container text-center">
<p style="text-align: center;">INDIA'S #1 SITE FOR COMPETITIVE EXAM
PREPARATION</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid" >
<div class="navbar-header"> <button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div>
<!--side navigator--> <button type="button" class="btn btn-default btn-sm" onclick="openNav()" style="visibility: hidden;">
<span class="glyphicon glyphicon-plus"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
UGC - NET <span class="caret"></span></a>
<ul class="dropdown-menu">
<li> <a href="http://upscfever.com/upsc-fever/en/how-to-study/en-how2-ugc.html"><span class="glyphicon glyphicon-education"></span> Studyplan</a>
</li><li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/syllabus/en-syllabus-ugc.html"><span class="glyphicon glyphicon-book"></span> Syllabus</a>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"> Paper - I</a>
<ul class="dropdown-menu">
<li> <a href="http://upscfever.com/upsc-fever/en/apti/apti-homepage.html"><span class="glyphicon glyphicon-hourglass"></span> General Aptitude - Teaching Research</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/polity/en-polity-homepage.html">General Administration</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/environment/en-env-homepage.html">Environment</a>
</li>
</ul>
</li> <li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/history/en-history-homepage.html"><span class="glyphicon glyphicon-header"></span> History</a>
</li> <li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"> Indian Culture </a>
<ul class="dropdown-menu">
<li> <a href="http://upscfever.com/upsc-fever/en/culture/en-cul-homepage">Ancient Indian Culture</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/history/en-history-homepage.html"><span class="glyphicon glyphicon-header"></span> Ancient History</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/geog/geog-homepage.html"><span class="glyphicon glyphicon-globe"></span> Geography</a>
</li>
<li role="separator" class="divider"></li>
<li> <a href="http://upscfever.com/upsc-fever/en/economy/economy-homepage.html"><span class="glyphicon glyphicon-piggy-bank"></span> Economics</a>
</li> <li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Public Administration
</a>
<ul class="dropdown-menu">
<li>
<a href="http://upscfever.com/upsc-fever/en/pubad/pubad-homepage.html">Indian Public Administration</a>
</li>
<li> <a href="http://upscfever.com/upsc-fever/en/polity/en-polity-homepage.html">Indian Polity</a>
</li>
</ul>
</li> <li role="separator" class="divider"></li>
<li class="dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown"> Political Science
</a>
<ul class="dropdown-menu">
<li>
<a href="http://upscfever.com/upsc-fever/en/polity/en-polity-homepage.html">Political Theory</a>
</li>
<li>
<a href="http://upscfever.com/upsc-fever/en/pubad/pubad-homepage.html"><span class="glyphicon glyphicon-user"></span> Indian Public Administration</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
答案 0 :(得分：0)
这是一个下拉示例
$(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
},
function() {
$('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
$('b', this).toggleClass("caret caret-up");
});
});.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>