我想让我的下拉菜单像下面图片中的样子。问题是，当我把鼠标悬停在主菜单的第二项上时，子菜单会在上方留出空白间距，如左侧图片所示。我不希望有这个空白区域。我希望所有具有子菜单的主菜单选项的子菜单始终显示在相同的大小和位置上。
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:0px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {
content: " ";
display: block;
float: right;
height: 0;
margin-right: -1px;
margin-top: 5px;
width: 190px;
padding-left:10px;
}
#abg > li > a:hover, #abg > .active > a:hover {
text-decoration: none;
background-color:#49b3e7;
padding-top:15px;
padding-bottom:20px;
}
@media (max-width: 767px) {
.navbar-nav {
display: inline;
}
.navbar-default .navbar-brand {
display: inline;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: red;
background-color: #ccc;
border-radius: 4px;
margin-top: 2px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
.navbar-nav .open .dropdown-menu {
border-bottom: 1px solid white;
border-radius: 0;
}
.dropdown-menu {
padding-left: 10px;
}
.dropdown-menu .dropdown-menu {
padding-left: 20px;
}
.dropdown-menu .dropdown-menu .dropdown-menu {
padding-left: 30px;
}
li.dropdown.open {
border: 0px solid red;
}
}
@media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<nav class="navbar navbar-default navbar-fixed-top hidden-xs " role="navigation" style="background-color:#49b3e7;color:white;margin-top:50px;cursor:pointer">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" style="cursor:pointer">
<a href="ab10.html"><span class="dropdown-toggle" data-toggle="dropdown" style="color:white;cursor:pointer;">All Products </span><span class="caret" style="color:white;cursor:pointer;"></span></a>
<ul class="dropdown-menu" id="abg">
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Grocery</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li><a href="ab2.html" style="padding-top:15px;padding-bottom:15px;">Meals & Prep</a></li>
<li><a href="ab3.html" style="padding-top:15px;padding-bottom:15px;">Spreads & Sweeteners</a></li>
<li><a href="ab4.html" style="padding-top:15px;padding-bottom:15px;">Breafast</a></li>
<li><a href="ab5.html" style="padding-top:15px;padding-bottom:15px;">Salty Snacks</a></li>
<li><a href="ab6.html" style="padding-top:15px;padding-bottom:15px;">Chocolate & Candy</a></li>
<li><a href="ab7.html" style="padding-top:15px;padding-bottom:15px;">Condiments & Spices</a></li>
<li><a href="ab8.html" style="padding-top:15px;padding-bottom:15px;">Fruits & Nuts</a></li>
<li><a href="ab9.html" style="padding-top:15px;padding-bottom:15px;">Cookies & Bars</a></li>
<hr>
<li><a href="ab11.html" style="padding-top:15px;padding-bottom:15px;">Shop All Grocery</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Dole-licious </br>Snacks </h3>
<img src="grocery1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Beverages</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li><a href="ab12.html" style="padding-top:15px;padding-bottom:15px;">Coffee & Tea</a></li>
<li><a href="ab13.html" style="padding-top:15px;padding-bottom:15px;">Dairy</a></li>
<li><a href="ab14.html" style="padding-top:15px;padding-bottom:15px;">Jucies</a></li>
<li><a href="ab15.html" style="padding-top:15px;padding-bottom:15px;">Mixes</a></li>
<li><a href="ab16.html" style="padding-top:15px;padding-bottom:15px;">Sports & Energy</a></li>
<li><a href="ab17.html" style="padding-top:15px;padding-bottom:15px;">Water & Sparkling</a></li>
<hr>
<li><a href="ab18.html" style="padding-top:15px;padding-bottom:15px;">Shop All Beverages</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-61px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:77px;margin-top:163px;"> Flavorful</br> fun made </br>easy</h3>
<img src="beverages1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Bath & Body</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab19.html" style="padding-top:15px;padding-bottom:15px;">Deodorants</a></li>
<li><a href="ab20.html" style="padding-top:15px;padding-bottom:15px;">Hand Soaps</a></li>
<li><a href="ab21.html" style="padding-top:15px;padding-bottom:15px;">Shaving</a></li>
<li><a href="ab22.html" style="padding-top:15px;padding-bottom:15px;">Shower</a></li>
<li><a href="ab23.html" style="padding-top:15px;padding-bottom:15px;">Skin Care</a></li>
<hr>
<li><a href="ab24.html" style="padding-top:15px;padding-bottom:15px;">Shop All Bath & Body</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-116px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Would you </br>Lather </h3>
<img src="bath&body1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Health</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab25.html" style="padding-top:15px;padding-bottom:15px;">Ladies</a></li>
<li><a href="ab26.html" style="padding-top:15px;padding-bottom:15px;">Dental & Eye</a></li>
<li><a href="ab27.html" style="padding-top:15px;padding-bottom:15px;">Relief</a></li>
<li><a href="ab28.html" style="padding-top:15px;padding-bottom:15px;">Supplements</a></li>
<li><a href="ab29.html" style="padding-top:15px;padding-bottom:15px;">Adult Care</a></li>
<hr>
<li><a href="ab30.html">Shop All Health</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-171px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;">Picture of </br>Health </h3>
<img src="health.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Cleaning Supplies</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab31.html" style="padding-top:15px;padding-bottom:15px;">Surface Cleaners</a></li>
<li><a href="ab32.html" style="padding-top:15px;padding-bottom:15px;">Paper & Plastic</a></li>
<li><a href="ab33.html" style="padding-top:15px;padding-bottom:15px;">Laundry</a></li>
<li><a href="ab34.html" style="padding-top:15px;padding-bottom:15px;"> Dish Soaps</a></li>
<li><a href="ab35.html" style="padding-top:15px;padding-bottom:15px;">Air & Fresheners</a></li>
<hr>
<li><a href="ab36.html" style="padding-top:15px;padding-bottom:15px;">Shop All Cleaning Supplies</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-226px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> So Fresh </br>and Clean </h3>
<img src="cleaning.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Home & Office</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab37.html" style="padding-top:15px;padding-bottom:15px;">Stationery</a></li>
<li><a href="ab38.html" style="padding-top:15px;padding-bottom:15px;">Appliances & Tools</a></li>
<li><a href="ab39.html" style="padding-top:15px;padding-bottom:15px;">Tabletop & Storage</a></li>
<hr>
<li><a href="ab40.html" style="padding-top:15px;padding-bottom:15px;">Shop All Home & Office</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-281px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Lock in the </br>freshness </h3>
<img src="home.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Babies & Kids </span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li><a href="ab41.html" style="padding-top:15px;padding-bottom:15px;">Care & Cleaning</a></li>
<li><a href="ab42.html" style="padding-top:15px;padding-bottom:15px;">Diapers & Wipes</a></li>
<li><a href="ab43.html" style="padding-top:15px;padding-bottom:15px;">Nutrition</a></li>
<hr>
<li><a href="ab44.html" style="padding-top:15px;padding-bottom:15px;">Shop All Babies & Kids</a></li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-336px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Baby got </br> Bath </h3>
<img src="baby.png" class="img-responsive"></a>
</ul>
</li>
<li><a href="ab45.html" style="padding-top:15px;padding-bottom:20px;">Lifestyle<span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color: rgba(255, 255, 255, .1);"></span></a></li>
<li><a href="ab46.html" style="padding-top:15px;padding-bottom:20px;border-bottom:1px solid #6d6d6d;">Pets <span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color:rgba(255, 255, 255, .1);"></span></a></li>
<li><a href="ab47.html" style="padding-top:15px;padding-bottom:20px;">Shop All Products <span class="glyphicon glyphicon-chevron-right" style="margin-left:100px;color:rgba(255, 255, 255, .1);"></span></a></li>
</ul>
</li>
<li><a href="ab49.html" style="color:white;">Best Sellers</a></li>
<li><a href="ab50.html" style="color:white;">What's New</a></li>
<li><a href="ab51.html" style="color:white;">On Sale</a></li>
<li><a href="ab52.html" style="color:white;">Samples</a></li>
</ul>
</div>
</nav>
</div>