如何使懸停全寬-有解無憂

我正在使用 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/[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>

uj5u.com熱心網友回復：

您可以通過添加width: 100%;到您的ul.dropdown-menu liCSS來實作這一點。請參閱我在下面所做的補充。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375583.html

標籤：javascript html css 推特引导 bootstrap-5

上一篇：Bootstrap嵌套col不會拉伸全高

下一篇：編輯JQuery函式以影響2個ID而不是1個