我正在寻找有关更好地进行悬停的更好方法的建议。当前的实现还不完善，我尝试了一些jquery函数来缓解延迟问题。我想延迟一下，以使父下拉菜单在您离开整个层次结构之前不会消失。我当前正在使用引导程序4。
<div class="dropdown-content" style="overflow: auto;
min-height: 425px;">
<div class="row">
<div class="col-xs-12 col-md-3">
<div class="d-flex flex-column nav
nav-tabs">
<a data-toggle="tab" href="shopping.html">
<div class="fa fa-home"> </div>Home
</a>
<!--Shopping-->
<ul class="mainDropDown">
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html">
<div class="fa fa-tags">
</div>Shopping
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="appleStoreMenuLabel">
Apple Store</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">iPods
</a></li>
<li><a href="searchResults.html">iPod
Accessories
</a></li>
<li><a href="searchResults.html">Watches</a></li>
<li><a href="searchResults.html">Mac
Systems</a></li>
<li><a href="searchResults.html">iPads</a></li>
<li><a href="searchResults.html">Shop
All
Apple
Store</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="babyMenuLabel">
Baby</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Clothing</a></li>
<li><a href="searchResults.html">Feeding</a></li>
<li><a href="searchResults.html">Gear
</a></li>
<li><a href="searchResults.html">Maternity</a></li>
<li><a href="searchResults.html">Nursery
</a></li>
<li><a href="searchResults.html">Care
& Safety</a></li>
<li><a href="searchResults.html">Shop
All Baby</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="booksMenuLabel">
Books</a>
<ul class="dropdown-menu
dropup">
<li><a href="searchResults.html">Autobiography
&
Biography</a></li>
<li><a href="searchResults.html">Cooking
</a></li>
<li><a href="searchResults.html">Health
&
Fitness</a></li>
<li><a href="searchResults.html">History</a></li>
<li><a href="searchResults.html">Humor
</a></li>
<li><a href="searchResults.html">Juvenile
NonFiction</a></li>
<li><a href="searchResults.html">Juvenile
Fiction</a></li>
<li><a href="searchResults.html">Religion</a></li>
<li><a href="searchResults.html">Social
Science</a></li>
<li><a href="searchResults.html">Sports
&
Recreation</a></li>
<li><a href="searchResults.html">Shop
All
Books</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="electronicsMenuLabel">
Electronics</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="fashionAccMenuLabel">
<a tabindex="1" href="searchResults.html">
Fashion
Accessories</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="giftBasketsMenuLabel">
<a tabindex="1" href="searchResults.html">
Gift Baskets</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="homeGardenMenuLabel">
<a tabindex="1" href="searchResults.html">
Home & Garden</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="jewelryMenuLabel">
<a tabindex="1" href="searchResults.html">
Jewelry</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="moviesMenuLabel">
<a tabindex="1" href="searchResults.html">
Movies</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="musicMenuLabel">
<a tabindex="1" href="searchResults.html">
Music</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html" id="officeProductsMenuLabel">
Office Products</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
<li class="dropdown-submenu" role="menu" id="onSaleNowMenuLabel">
<a tabindex="1" href="searchResults.html">
On Sale Now!</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1</a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!--Events-->
<ul class="mainDropDown">
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html">
<div class="fas
fa-ticket-alt"
style="margin: 0 5px
0 0;">
</div>Events
</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1 </a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
</ul>
<!--Travel-->
<ul class="mainDropDown">
<li class="dropdown-submenu" role="menu">
<a tabindex="1" href="searchResults.html">
<div class="fa
fa-plane">
</div>Travel
</a>
<ul class="dropdown-menu">
<li><a href="searchResults.html">Link
1 </a></li>
<li><a href="searchResults.html">Link
2 </a></li>
<li><a href="searchResults.html">Link
3</a></li>
</ul>
</li>
</ul>
<hr class="w-100">
<a data-toggle="tab" href="searchResults.html">
<div class="fa fa-certificate">
</div>On Sale!
</a>
</div>
<!--End of DropDown Container Style-->
</div>
<div class="col-xs-12 col-md-3 tab-content">
<!--second level here-->
</div>
<div class="col-xs-12 col-md-3 tab-content">
<!--3rd level here-->
</div>
<!-- Image Mapping to Department/Shopping parent categories-->
<div class="col-xs-12 col-md-3">
<div class="d-flex justify-content-end
align-content-end">
<div><img src="http://rewardtrax.com/isiprogram/images/Final_Apple_150.png"
class="img-fluid" id="appleStoreLogo" style="display: none"></div>
<div><img src="http://rewardtrax.com/isiprogram/images/Final_Electronics_150.png"
class="img-fluid" id="electronicsLogo" style="display: none"></div>
<div><img src="http://rewardtrax.com/isiprogram/images/Final_Jewelry_150.png"
class="img-fluid" id="jewelryLogo" style="display: none"></div>
<div><img src="http://rewardtrax.com/isiprogram/images/HomeGarden_150.png"
class="img-fluid" id="homeGardenLogo" style="display: none"></div>
<div><img src="http://rewardtrax.com/isiprogram/images/Final_Sale_150.png"
class="img-fluid" id="onSaleNowLogo" style="display: none"></div>
<div><img src="http://rewardtrax.com/isiprogram/images/Final_Movies_150.png"
class="img-fluid" id="moviesLogo" style="display: none"></div>
</div>
</div>
<!--End Image Mapping-->
</div>
</div>