html - 单击空白区域时下拉菜单被激活
问题描述
如何确保仅在单击箭头或名称时才激活下拉菜单。我尝试查看类似的问题,但它对我不起作用。如果我单击“商店”旁边的任意位置,下拉菜单将被激活。
这是代码。你可以从代码中看到,光标在“商店”左右水平线上的任意位置都变为手。
编辑代码以包含 inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- Popper for drop down menus -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Load bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" style="display:inline-block;" href="#" data-toggle="dropdown">Shop</a>
<div class="dropdown-menu p-0">
<div class="d-flex flex-wrap flex-md-nowrap px-2">
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Shop layouts</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ls.html">Shop
Grid - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-rs.html">Shop
Grid - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ft.html">Shop
Grid - Filters on Top</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ls.html">Shop
List - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-rs.html">Shop
List - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ft.html">Shop
List - Filters on Top</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Marketplace</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-category.html">Category Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-single.html">Single Item Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-vendor.html">Vendor Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-cart.html">Cart</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-checkout.html">Checkout</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Shop pages</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-categories.html">Shop Categories</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v1.html">Product Page v.1</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v2.html">Product Page v.2</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-cart.html">Cart</a>
</li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-details.html">Checkout - Details</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-shipping.html">Checkout - Shipping</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-payment.html">Checkout - Payment</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-review.html">Checkout - Review</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-complete.html">Checkout - Complete</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="order-tracking.html">Order Tracking</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="comparison.html">Product
Comparison</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 pr-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Grocery store</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-catalog.html">Product Catalog</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-single.html">Single Product Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-checkout.html">Checkout</a></li>
</ul>
</div>
<a class="d-block" href="#"><img src="img/shop/menu-banner.jpg" alt="Promo banner"></a>
</div>
</div>
</div>
</li>
</body>
</html>
解决方案
谢谢Rishabh和Ken的回答
如果您将填充设置为零并显示:内联块它解决了我的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- Popper for drop down menus -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Load bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<li class="nav-item dropdown text-center"><a class="nav-link dropdown-toggle" style="padding:0; display:inline-block" href="#" data-toggle="dropdown">Shop</a>
<div class="dropdown-menu p-0">
<div class="d-flex flex-wrap flex-md-nowrap px-2">
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Shop layouts</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ls.html">Shop
Grid - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-rs.html">Shop
Grid - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ft.html">Shop
Grid - Filters on Top</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ls.html">Shop
List - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-rs.html">Shop
List - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ft.html">Shop
List - Filters on Top</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Marketplace</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-category.html">Category Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-single.html">Single Item Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-vendor.html">Vendor Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-cart.html">Cart</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-checkout.html">Checkout</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Shop pages</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-categories.html">Shop Categories</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v1.html">Product Page v.1</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v2.html">Product Page v.2</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-cart.html">Cart</a>
</li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-details.html">Checkout - Details</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-shipping.html">Checkout - Shipping</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-payment.html">Checkout - Payment</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-review.html">Checkout - Review</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-complete.html">Checkout - Complete</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="order-tracking.html">Order Tracking</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="comparison.html">Product
Comparison</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 pr-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Grocery store</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-catalog.html">Product Catalog</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-single.html">Single Product Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-checkout.html">Checkout</a></li>
</ul>
</div>
<a class="d-block" href="#"><img src="img/shop/menu-banner.jpg" alt="Promo banner"></a>
</div>
</div>
</div>
</li>
</body>
</html>