How to make hover to full width-CodePudding

I'm using Bootstrap 5 to make dropdown navigation and I have some troubles with making a hover effect in full visible width and I will be thankful for some explanations how it should be work. So the problem: I want to make black effect :hover that it was black in full visible width of showing bootstrap 5 dropdown. I tried to make something like this:

ul.dropdown-menu.show li a{
    width: 100%:        
}

but it did not work.

* {
  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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </script>
</body>

CodePudding user response：

You can achieve this by adding width: 100%; to your ul.dropdown-menu li CSS. Please see the additions I made below.

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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </script>
</body>