我有一个引导导航栏，其中下拉列表在悬停时打开。问题是，当我点击一个链接打开菜单然后悬停到另一个链接时，初始链接保持打开状态。我需要它，这样一次只能打开一个下拉菜单。我不介意js解决方案。
这是一个bootply：http://www.bootply.com/TcskjKOWfA
/* CSS used here will be applied after bootstrap.css */
#main_navbar .navbar-nav {
margin: 0 auto;
display: table;
table-layout: auto;
float: none;
width: 100%;
}
#main_navbar .navbar-nav > li {
display: table-cell;
float: none;
text-align: center;
}
#main_navbar .dropdown-toggle:active,
#main_navbar .open .dropdown-toggle,
#main_navbar .dropdown-toggle:hover,
#main_navbar .open .dropdown-toggle {
background-color: #fff;
color: #000 !important;
font-weight: 600;
border-top: 1px solid #ccc !important;
border-right: 1px solid #ccc !important;
border-left: 1px solid #ccc !important;
border-bottom: 2px solid #fff !important;
z-index: 1005;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
background-color: #fff !important;
border-color: #ccc;
}
.nav .dropdown-menu {
padding: 20px;
top: 98%;
}
.dropdown-menu {
min-width: 230px;
}
.dropdown-header {
padding-left: 0 !important;
color: #000;
font-weight: 600;
font-size: 14px;
}
li + .dropdown-header {
padding-top: 20px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-4 {
min-width: 766px;
}
.multi-column-dropdown {
list-style: none;
padding-left: 15px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.7;
color: #000;
white-space: normal;
font-weight: 400;
font-size: 15px;
}
.dropdown-menu.multi-column {
padding-bottom: 20px;
}
#main_navbar .multi-column-dropdown a:hover {
opacity: 0.7;
}
#main_navbar .dropdown:hover .dropdown-menu {
display: block;
box-shadow: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="main_navbar">
<ul class="nav navbar-nav">
<!-- Brands Dropdown -->
<li class="dropdown"><a href="/brands.html" id="header-brands" class="dropdown-toggle" data-toggle="dropdown">BRANDS</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">A</li>
<li><a title="A. Lange & Sohne" href="/brand/a-lange-sohne.html">A. Lange & Sohne</a>
</li>
<li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a>
</li>
<li class="dropdown-header">B</li>
<li><a title="Baume & Mercier" href="/brand/baume-mercier.html">Baume & Mercier</a>
</li>
<li><a title="Bedat" href="/items.php?brand=74">Bedat</a>
</li>
<li><a title="Bell & Ross" href="/brand/bellross.html">Bell & Ross</a>
</li>
<li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a>
</li>
<li><a title="Breguet" href="/brand/breguet.html">Breguet</a>
</li>
<li><a title="Breitling" href="/brand/breitling.html">Breitling</a>
</li>
<li><a title="Bremont" href="/items.php?brand=115">Bremont</a>
</li>
<li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a>
</li>
<li class="dropdown-header">C</li>
<li><a title="Cartier" href="/brand/cartier.html">Cartier</a>
</li>
<li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a>
</li>
<li><a title="Chopard" href="/brand/chopard.html">Chopard</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">E</li>
<li><a title="Ebel" href="/brand/ebel.html">Ebel</a>
</li>
<li class="dropdown-header">G</li>
<li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a>
</li>
<li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a>
</li>
<li class="dropdown-header">H</li>
<li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a>
</li>
<li><a title="Hermes" href="/brand/hermes.html">Hermes</a>
</li>
<li><a title="Hublot" href="/brand/hublot.html">Hublot</a>
</li>
<li class="dropdown-header">I</li>
<li><a title="IWC" href="/brand/iwc.html">IWC</a>
</li>
<li class="dropdown-header">J</li>
<li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a>
</li>
<li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">L</li>
<li><a title="Longines" href="/brand/longines.html">Longines</a>
</li>
<li class="dropdown-header">M</li>
<li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a>
</li>
<li><a title="Michele" href="/brand/michele.html">Michele</a>
</li>
<li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a>
</li>
<li class="dropdown-header">O</li>
<li><a title="Omega" href="/brand/omega.html">Omega</a>
</li>
<li><a title="Orbita Watch Winders & Cases" href="/brand/orbita-winders.html">Orbita Watch Winders & Cases</a>
</li>
<li><a title="Oris" href="/brand/oris.html">Oris</a>
</li>
<li class="dropdown-header">P</li>
<li><a title="Panerai" href="/items.php?brand=85">Panerai</a>
</li>
<li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a>
</li>
<li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a>
</li>
<li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a>
</li>
<li><a title="Piaget" href="/items.php?brand=69">Piaget</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">R</li>
<li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a>
</li>
<li><a title="Rolex" href="/brand/rolex.html">Rolex</a>
</li>
<li class="dropdown-header">T</li>
<li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a>
</li>
<li class="dropdown-header">U</li>
<li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a>
</li>
<li class="dropdown-header">V</li>
<li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a>
</li>
<li class="dropdown-header">Z</li>
<li><a title="Zenith" href="/brand/zenith.html">Zenith</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Mens Watches Dropdown -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li><a href="/luxury-watches-for-men.html">All men's watches</a>
</li>
<li class="dropdown-header">SHOP BY PRICE</li>
<li><a href="/items.php?price_from=0&price_to=2000&size=1,18">under $2,000</a>
</li>
<li><a href="/items.php?price_from=2000&price_to=5000&size=1,18">$2,000 - $5,000</a>
</li>
<li><a href="/items.php?price_from=5001&price_to=8000&size=1,18">$5,001 - $8,000</a>
</li>
<li><a href="/items.php?price_from=8001&price_to=12000&size=1,18">$8,001 - $12,000</a>
</li>
<li><a href="/items.php?price_from=12001&size=1,18">$12,001 and up</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP MEN'S SALE</li>
<li><a href="/luxury-watches-for-men.html">All men's sale</a>
</li>
<li class="dropdown-header">SHOP SALE BY PRICE</li>
<li><a href="/items.php?price_from=0&price_to=2000&size=1,18&special=1">under $2,000</a>
</li>
<li><a href="/items.php?price_from=2000&price_to=5000&size=1,18&special=1">$2,000 - $5,000</a>
</li>
<li><a href="/items.php?price_from=5001&price_to=8000&size=1,18&special=1">$5,001 - $8,000</a>
</li>
<li><a href="/items.php?price_from=8001&price_to=12000&size=1,18&special=1">$8,001 - $12,000</a>
</li>
<li><a href="/items.php?price_from=12001&size=1,18&special=1">$12,001 and up</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY MOVEMENT</li>
<li><a href="/Mens-Quartz-Watches.html">Quartz</a>
</li>
<li><a href="/Mens-Automatic-Watches.html">Automatic</a>
</li>
<li><a href="/Mens-Manual-Wind-Watches.html">Manual Wind</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Ladies Watches Dropdown -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li><a href="/luxury-watches-for-women.html">All women's watches</a>
</li>
<li class="dropdown-header">SHOP BY SALE</li>
<li><a href="/womens-watches-on-sale.html">Women's watches on sale</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY PRICE</li>
<li><a href="/items.php?price_from=0&price_to=2000&size=2">under $2,000</a>
</li>
<li><a href="/items.php?price_from=2000&price_to=5000&size=2">$2,000 - $5,000</a>
</li>
<li><a href="/items.php?price_from=5001&price_to=8000&size=2">$5,001 - $8,000</a>
</li>
<li><a href="/items.php?price_from=8001&price_to=12000&size=2">$8,001 - $12,000</a>
</li>
<li><a href="/items.php?price_from=12001=8000&size=2">$12,001 and up</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">POLICIES</a>
<ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
<div class="row">
<div class="col-sm-12">
<ul class="multi-column-dropdown">
<li><a href="/policies/returns">Returns and Exchanges</a>
</li>
<li><a href="/policies/payment-shipping">Payment and Shipping</a>
</li>
<li><a href="/policies/warranty">Warranty and Repair</a>
</li>
<li><a href="/policies/international">International Ordering</a>
</li>
<li><a href="/policies/about">About</a>
</li>
<li><a href="/policies/contact">Contact</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="/trade_in.php">WATCH TRADE-IN</a>
</li>
<!-- Policies Dropdown -->
<li><a href="/preowned">PREOWNED</a>
</li>
<li><a href="/search.php">ADVANCED SEARCH</a>
</li>
</ul>
</div>
答案 0 :(得分：1)
<a href="">代码中的<li>
<div id="main_navbar">
<ul class="nav navbar-nav">
<!-- Brands Dropdown -->
<li class="dropdown">
<a href="/brands.html" id="header-brands">BRANDS</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">A</li>
<li><a title="A. Lange & Sohne" href="/brand/a-lange-sohne.html">A. Lange & Sohne</a></li>
<li><a title="Audemars Piguet" href="/brand/audemars-piguet.html">Audemars Piguet</a></li>
<li class="dropdown-header">B</li>
<li><a title="Baume & Mercier" href="/brand/baume-mercier.html">Baume & Mercier</a></li>
<li><a title="Bedat" href="/items.php?brand=74">Bedat</a></li>
<li><a title="Bell & Ross" href="/brand/bellross.html">Bell & Ross</a></li>
<li><a title="Blancpain" href="/brand/blancpain.html">Blancpain</a></li>
<li><a title="Breguet" href="/brand/breguet.html">Breguet</a></li>
<li><a title="Breitling" href="/brand/breitling.html">Breitling</a></li>
<li><a title="Bremont" href="/items.php?brand=115">Bremont</a></li>
<li><a title="Bulgari" href="/brand/bulgari.html">Bulgari</a></li>
<li class="dropdown-header">C</li>
<li><a title="Cartier" href="/brand/cartier.html">Cartier</a></li>
<li><a title="Chanel" href="/brand/chanel-watches.html">Chanel</a></li>
<li><a title="Chopard" href="/brand/chopard.html">Chopard</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">E</li>
<li><a title="Ebel" href="/brand/ebel.html">Ebel</a></li>
<li class="dropdown-header">G</li>
<li><a title="Girard Perregaux" href="/brand/girard-perregaux.html">Girard Perregaux</a></li>
<li><a title="Glashutte Original" href="/brand/glashutte-original.html">Glashutte Original</a></li>
<li class="dropdown-header">H</li>
<li><a title="Harry Winston" href="/brand/harry-winston.html">Harry Winston</a></li>
<li><a title="Hermes" href="/brand/hermes.html">Hermes</a></li>
<li><a title="Hublot" href="/brand/hublot.html">Hublot</a></li>
<li class="dropdown-header">I</li>
<li><a title="IWC" href="/brand/iwc.html">IWC</a></li>
<li class="dropdown-header">J</li>
<li><a title="Jaeger LeCoultre" href="/brand/jaeger-lecoultre.html">Jaeger LeCoultre</a></li>
<li><a title="Jaquet Droz" href="/brand/jaquet-droz.html">Jaquet Droz</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">L</li>
<li><a title="Longines" href="/brand/longines.html">Longines</a></li>
<li class="dropdown-header">M</li>
<li><a title="Maurice Lacroix" href="/brand/maurice-lacroix.html">Maurice Lacroix</a></li>
<li><a title="Michele" href="/brand/michele.html">Michele</a></li>
<li><a title="Montblanc" href="/brand/montblanc-watches.html">Montblanc</a></li>
<li class="dropdown-header">O</li>
<li><a title="Omega" href="/brand/omega.html">Omega</a></li>
<li><a title="Orbita Watch Winders & Cases" href="/brand/orbita-winders.html">Orbita Watch Winders & Cases</a></li>
<li><a title="Oris" href="/brand/oris.html">Oris</a></li>
<li class="dropdown-header">P</li>
<li><a title="Panerai" href="/items.php?brand=85">Panerai</a></li>
<li><a title="Parmigiani" href="/items.php?brand=118">Parmigiani</a></li>
<li><a title="Patek Philippe" href="/items.php?brand=68">Patek Philippe</a></li>
<li><a title="Perrelet" href="/items.php?brand=106">Perrelet</a></li>
<li><a title="Piaget" href="/items.php?brand=69">Piaget</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">R</li>
<li><a title="Raymond Weil" href="/brand/raymond-weil.html">Raymond Weil</a></li>
<li><a title="Rolex" href="/brand/rolex.html">Rolex</a></li>
<li class="dropdown-header">T</li>
<li><a title="Tag Heuer" href="/brand/Tag-Heuer.html">Tag Heuer</a></li>
<li class="dropdown-header">U</li>
<li><a title="Ulysse Nardin" href="/brand/ulysse-nardin.html">Ulysse Nardin</a></li>
<li class="dropdown-header">V</li>
<li><a title="Vacheron Constantin" href="/brand/vacheron-constantin.html">Vacheron Constantin</a></li>
<li class="dropdown-header">Z</li>
<li><a title="Zenith" href="/brand/zenith.html">Zenith</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Mens Watches Dropdown -->
<li class="dropdown">
<a>MEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li><a href="/luxury-watches-for-men.html">All men's watches</a></li>
<li class="dropdown-header">SHOP BY PRICE</li>
<li><a href="/items.php?price_from=0&price_to=2000&size=1,18">under $2,000</a></li>
<li><a href="/items.php?price_from=2000&price_to=5000&size=1,18">$2,000 - $5,000</a></li>
<li><a href="/items.php?price_from=5001&price_to=8000&size=1,18">$5,001 - $8,000</a></li>
<li><a href="/items.php?price_from=8001&price_to=12000&size=1,18">$8,001 - $12,000</a></li>
<li><a href="/items.php?price_from=12001&size=1,18">$12,001 and up</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP MEN'S SALE</li>
<li><a href="/luxury-watches-for-men.html">All men's sale</a></li>
<li class="dropdown-header">SHOP SALE BY PRICE</li>
<li><a href="/items.php?price_from=0&price_to=2000&size=1,18&special=1">under $2,000</a></li>
<li><a href="/items.php?price_from=2000&price_to=5000&size=1,18&special=1">$2,000 - $5,000</a></li>
<li><a href="/items.php?price_from=5001&price_to=8000&size=1,18&special=1">$5,001 - $8,000</a></li>
<li><a href="/items.php?price_from=8001&price_to=12000&size=1,18&special=1">$8,001 - $12,000</a></li>
<li><a href="/items.php?price_from=12001&size=1,18&special=1">$12,001 and up</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY MOVEMENT</li>
<li><a href="/Mens-Quartz-Watches.html">Quartz</a></li>
<li><a href="/Mens-Automatic-Watches.html">Automatic</a></li>
<li><a href="/Mens-Manual-Wind-Watches.html">Manual Wind</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- Ladies Watches Dropdown -->
<li class="dropdown">
<a>WOMEN'S WATCHES</a>
<ul class="dropdown-menu multi-column columns-4" role="menu">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP ALL</li>
<li><a href="/luxury-watches-for-women.html">All women's watches</a></li>
<li class="dropdown-header">SHOP BY SALE</li>
<li><a href="/womens-watches-on-sale.html">Women's watches on sale</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">SHOP BY PRICE</li>
<li><a href="/items.php?price_from=0&price_to=2000&size=2">under $2,000</a></li>
<li><a href="/items.php?price_from=2000&price_to=5000&size=2">$2,000 - $5,000</a></li>
<li><a href="/items.php?price_from=5001&price_to=8000&size=2">$5,001 - $8,000</a></li>
<li><a href="/items.php?price_from=8001&price_to=12000&size=2">$8,001 - $12,000</a></li>
<li><a href="/items.php?price_from=12001=8000&size=2">$12,001 and up</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
<a>POLICIES</a>
<ul class="dropdown-menu multi-column" role="menu" style="padding-top:20px;">
<div class="row">
<div class="col-sm-12">
<ul class="multi-column-dropdown">
<li><a href="/policies/returns">Returns and Exchanges</a></li>
<li><a href="/policies/payment-shipping">Payment and Shipping</a></li>
<li><a href="/policies/warranty">Warranty and Repair</a></li>
<li><a href="/policies/international">International Ordering</a></li>
<li><a href="/policies/about">About</a></li>
<li><a href="/policies/contact">Contact</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="/trade_in.php">WATCH TRADE-IN</a></li>
<!-- Policies Dropdown -->
<li><a href="/preowned">PREOWNED</a></li>
<li><a href="/search.php">ADVANCED SEARCH</a></li>
</ul>