Question

我是编码新手。我从bootstrap.com网站上获取了此代码，然后尝试对其进行调整。我发现哪些类控制导航菜单的颜色，并将其在CSS中更改为所需的颜色。但是，我无法弄清楚代码的哪一部分控制了子菜单的悬停状态。我也需要更改颜色。

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#">Do You Know Jennipher</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            
        </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">About Me</a>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Egyptian Petrdise</a>
          <a class="dropdown-item" href="#">Movie Madness</a>
          <a class="dropdown-item" href="#">George's Safari Adventure</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Say Hello</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

我添加的CSS如下：

 .navbar{
     background-color: #55C9EA;
     font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    }

  .dropdown-menu{
      background-color: #55C9EA;
    }

Answer 1

您是否将“埃及Petrdise，电影疯狂和乔治的野生动物园冒险”作为子菜单使用？如果是这样，只需像使用.navbar和.dropdown-menu那样定位类。因此，它不是.dropdown-menu，而是.dropdown-item，而是在悬停时使用CSS伪选择器:hover来更改颜色。

.navbar{
 background-color: #55C9EA;
 font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.dropdown-menu{
  background-color: #55C9EA;
}

.nav-link {   <---- Targets home, about me, portfolio, gallery, say hello
  color: red;
}

.nav-link:hover {
  color: yellow;
}

.dropdown-item { <--- Targets portfolio submenu
  color: green;
}

.dropdown-item:hover {
  color: purple;
}

这里是fiddle。

代码的哪一部分控制子菜单的悬停状态

1 个答案: