[英]How to make hover to full width
我正在使用 Bootstrap 5 進行下拉導航，並且在完全可見寬度上制作 hover 效果時遇到了一些麻煩，我將感謝一些解釋它應該如何工作。 所以問題是：我想制作黑色效果：hover，它在顯示引導程序 5 下拉列表的完全可見寬度中是黑色的。 我試圖做這樣的事情：
ul.dropdown-menu.show li a{
width: 100%:
}
但它沒有用。
* { margin: 0; padding: 0; box-sizing: border-box; } header { position: sticky; top: 0; } #header { box-sizing: border-box; background-color: #000; display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; } #header ul li a { text-decoration: none; margin-top: 5px; } #header ul li { list-style: none; display: inline-block; text-decoration: none; }.logo { background: black; text-align: center; width: 123px; padding: 5px; color: #fff; }.menu { text-align: right; flex: 1; }.menu ul li { margin-right: 3%; padding-top: 10px; color: #fff; }.menu ul li { display: inline-block; text-decoration: none; }.menuFirst { flex: 2; padding-top: 10px; }.menuFirst ul li a, .menu ul li a { padding: 10px 10px 12px 10px; }.menuFirst ul li a:hover, .menu ul li a:hover { background-color: #fff; color: #000; }.menuFirst ul li { display: inline-block; text-decoration: none; margin-left: 3%; }.menuFirst a, .menu a { color: #fff; } a { text-decoration: none; }.navgation-custom li { -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.66); box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.66); }.navgation-custom li:hover { background: #000; } @media screen and (max-width: 600px) {.menu { text-align: right; flex: 1; margin: 30px; } }.menu a { color: black; } #dropdownMenuLink { color: white; } ul.dropdown-menu.show { display: block;important. } ul.dropdown-menu:show a:hover { background-color; #000: color; #fff. } ul.dropdown-menu:show li a { width: 100%: }
<head> <title>@ViewData["Title"]</title> <link href="/css/site.css" rel="stylesheet" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="icon" href="~/img/favicon.png" /> </head> <body> <header> <nav class="navbar-custom"> <div id="header"> <div class="logo"><a asp-controller="Home" asp-action="Index">BOOK STORE</a></div> <nav class="menuFirst"> <ul> <li><a asp-controller="Home" asp-action="Index">Home</a></li> <li><a href="#">Store</a></li> </ul> </nav> <nav class="menu" role="navigation"> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </nav> </div> </nav> </header> <main></main> <footer></footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </script> </body>
您可以通過添加width: 100%;來實現這一點。 到你的ul.dropdown-menu li CSS。 請參閱我在下面添加的內容。
ul.dropdown-menu li { width: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; } header { position: sticky; top: 0; } #header { box-sizing: border-box; background-color: #000; display: flex; justify-content: center; align-items: center; width: 100%; height: 70px; } #header ul li a { text-decoration: none; margin-top: 5px; } #header ul li { list-style: none; display: inline-block; text-decoration: none; }.logo { background: black; text-align: center; width: 123px; padding: 5px; color: #fff; }.menu { text-align: right; flex: 1; }.menu ul li { margin-right: 3%; padding-top: 10px; color: #fff; }.menu ul li { display: inline-block; text-decoration: none; }.menuFirst { flex: 2; padding-top: 10px; }.menuFirst ul li a, .menu ul li a { padding: 10px 10px 12px 10px; }.menuFirst ul li a:hover, .menu ul li a:hover { background-color: #fff; color: #000; }.menuFirst ul li { display: inline-block; text-decoration: none; margin-left: 3%; }.menuFirst a, .menu a { color: #fff; } a { text-decoration: none; }.navgation-custom li { -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.66); box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.66); }.navgation-custom li:hover { background: #000; } @media screen and (max-width: 600px) {.menu { text-align: right; flex: 1; margin: 30px; } }.menu a { color: black; } #dropdownMenuLink { color: white; } ul.dropdown-menu.show { display: block;important. } ul.dropdown-menu:show a:hover { background-color; #000: color; #fff. } ul.dropdown-menu:show li a { width: 100%: }
<head> <title>@ViewData["Title"]</title> <link href="/css/site.css" rel="stylesheet" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="icon" href="~/img/favicon.png" /> </head> <body> <header> <nav class="navbar-custom"> <div id="header"> <div class="logo"><a asp-controller="Home" asp-action="Index">BOOK STORE</a></div> <nav class="menuFirst"> <ul> <li><a asp-controller="Home" asp-action="Index">Home</a></li> <li><a href="#">Store</a></li> </ul> </nav> <nav class="menu" role="navigation"> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> </a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </nav> </div> </nav> </header> <main> </main> <footer> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </script> </body>
當您單擊“漢堡”菜單的：hover時，如何進行全頁寬度下拉菜單？
[英]How do I make a full page width dropdown when you click the :hover of the burger menu?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.