Twitter bootstrap 在悬停菜单和子菜单上获得下拉菜单-bootstrap 3.3.7
如何让下拉菜单和第二级菜单在悬停时打开。导航栏在单击时下拉，我应该将其更改为在悬停时下拉。我从w3schools.com获取了导航栏的代码。它工作得很好。但我必须在内部css中添加.hover或dropdown.hover。那么我在哪里添加它呢Twitter bootstrap 在悬停菜单和子菜单上获得下拉菜单-bootstrap 3.3.7,twitter-bootstrap,dropdown,mousehover,Twitter Bootstrap,Dropdown,Mousehover,如何让下拉菜单和第二级菜单在悬停时打开。导航栏在单击时下拉，我应该将其更改为在悬停时下拉。我从w3schools.com获取了导航栏的代码。它工作得很好。但我必须在内部css中添加.hover或dropdown.hover。那么我在哪里添加它呢 <!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="c
<!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>
UPSC热
$（函数（）{
$（“#footer”）.load（“footer.html”）；
$（'li.下拉子菜单'）。在（'click'，函数（事件）{
event.stopPropagation（）；
if（$（this）.hasClass（'open'））{
$（this.removeClass（'open'）；
}否则{
$（'li.下拉子菜单'）.removeClass（'open'）；
$（this.addClass（'open'）；
}
});
});
$（文档）.ready（函数（）{
$（'.dropdown toggle'）.dropdown（）
});
.下拉子菜单{
位置：相对位置；
}
.下拉子菜单>.下拉菜单{
排名：0；
左：100%；
利润上限：-6px；
左边距：-1px；
-webkit边界半径：0 6px 6px 6px；
-moz边界半径：0 6px 6px；
边界半径：0 6px 6px 6px；
}
.下拉子菜单.打开>.下拉菜单{
显示：块；
}
.下拉子菜单>a:之后{
显示：块；
内容：“；
浮动：对；
宽度：0；
身高：0；
边框颜色：透明；
边框样式：实心；
边框宽度：5px 0 5px 5px；
左边框颜色：#ccc；
边缘顶部：5px；
右边距：-10px；
}
.下拉子菜单.打开>a:之后{
左边框颜色：#fff；
}
.下拉式子菜单.向左拉{
浮动：无；
}
.dropdown-submenu.pull-left>。下拉菜单{
左-100%；
左边距：10px；
-webkit边界半径：6px 0 6px 6px；
-moz边界半径：6px 0 6px 6px；
边界半径：6px 0 6px 6px；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#ffffff；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
可见性：隐藏；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s
}
.sidenav a:悬停，.offcanvas a:聚焦{
颜色：#3399ff；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
/*删除导航栏的默认圆角边框并增加底部边距*/
navbar先生{
边缘底部：50px；
边界半径：0；
}
/*删除jumbotron的默认底部边距*/
琼伯伦先生{
背景色：#ffffff；
页边距底部：0；
}
/*为页脚添加灰色背景色和一些填充*/
印度第一竞争性考试网站
准备工作
-
-
-
-
-