I am working with Bootstrap 5 to create dropdown navigation, but I am facing some challenges with implementing a hover effect that covers the full visible width. I would greatly appreciate it if someone could provide me with detailed explanations on how to achieve this. The problem I am encountering is that I want the :hover effect to be black and cover the entire visible width of the Bootstrap 5 dropdown when shown. I attempted something like this:
ul.dropdown-menu.show li a{
width: 100%;
}
but unfortunately, it did not work as expected.
* {
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d6c8d4">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14777b667154263a2d3a26">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f243a2438">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</script>
</body>