【发布时间】：2022-01-11 21:33:47
【问题描述】：
我正在使用 Bootstrap 5 制作下拉导航，但在制作完全可见宽度的悬停效果时遇到了一些麻烦，我将感谢您对它应该如何工作的一些解释。所以问题是：我想制作黑色效果：悬停在显示引导程序 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>【问题讨论】：
-
您正在做很多不必要的自定义 CSS。 Bootstrap 已经应用了您的全局重置，并且您编写的大部分内容都可以通过库类获得。我建议您再次浏览the docs 以更加熟悉。
-
对于这种特殊情况，您寻求的行为是there by default。您只需要在标记中实现正确的类。我强烈建议使用 Bootstrap 约定（包括flex layout principles）重建您的标题，然后只使用自定义 CSS 更改较小的外观。你在这里工作真的太辛苦了，未来的开发者不会喜欢你的。
标签： javascript html css twitter-bootstrap bootstrap-5