在 Bootstrap 5 多级下拉菜单中更改背景颜色答案

【问题标题】：Change background color in Bootstrap 5 multi level dropdown menu在 Bootstrap 5 多级下拉菜单中更改背景颜色
【发布时间】：2022-08-05 20:20:19
【问题描述】：

有人试图在引导程序 5 的多下拉菜单中更改背景颜色吗？原始代码在这里https://bootstrap-menu.com/demos/multilevel.html

我想在多级访问/活动中更改背景颜色下面的代码不起作用

.dropdown-menu>.active>a, 
.dropdown-menu>.active>a:visited, 
.dropdown menu>.active>a:hover,  
.dropdown-menu>.active>a:focus { 
background-color: #222222!important;  
}

Sample

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

默认情况下，引导程序提供类以通过将类“.dropdown-menu-dark”更改为下拉菜单来将下拉菜单颜色更改为深色。

希望对你有用

【讨论】：

【解决方案2】：

.dropdown:hover >.dropdown-menu{
  display: block !important;
}
.dropdown-submenu:hover > .dropdown-menu{
  display: block !important;
    left: 100%;
    margin-top: -37px;
}

.dropdown-item{
  font-size: small; /* 13px */
}
.dropdown-toggle::after{
  font-size: var(--font-md);
  margin-bottom: -2px;
}
.dropdown-menu li a.active{
  color:#fff;
}

.custom-toggle-arrow{
      font-size: 18px;
      margin-top: 1px;
      line-height: 12px;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    <nav class="nav justify-content-center" aria-label="Secondary navigation">
              <li class="nav-item"><a class="nav-link" href="#">Nav Item 1</a></li>
        
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"                     aria-expanded="false">
                  Nav Item 2
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#"> Menu Item 1</a></li>
                  <li><a class="dropdown-item" href="#"> Menu Item 2</a></li>
                  <li class="dropdown-submenu">
                    <a class="dropdown-item" href="#"> Second Level <span
                        class="float-end custom-toggle-arrow">&#187</span></a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Second Level Item 1</a></li>
                      <li><a class="dropdown-item" href="#">Second Level Item 2</a></li>
    
                      <li class="dropdown-submenu">
                        <a class="dropdown-item" href="#"> Third Level <span
                            class="float-end custom-toggle-arrow">&#187</span></a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Third Level Item 1</a></li>
                          <li><a class="dropdown-item" href="#">Third Level Item 2</a></li>
                        </ul>
                      </li>
    
    
                    </ul>
                  </li>
                </ul>
              </li>
  </nav>
            
           
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：