将悬停效果添加到导航栏的特定部分

Question

这里我有一个带有下拉菜单的工作导航栏。但是，我希望主导航栏和下拉菜单有两种不同的悬停效果，我已经通过添加以下 CSS 代码使主导航栏具有悬停效果。

#nav_bar a:hover { 
                 background:#8c1b1f;
                 padding-bottom:13px;
                 padding-top:17px;
                 padding-left:10px;
                 padding-right:10px;                               
                 } 

我只需要一种向下拉菜单添加单独悬停效果的方法

Answer 1

你需要在这里使用 CSS：

#nav_bar>ul>li>a:hover {
      //styles here for main menu hover
}

#nav_bar>ul>li>ul>li>a:hover {
      //styles here for dropdown menu hover
}

所以主菜单悬停的 CSS 将变为：

#nav_bar>ul>li>a:hover {
     background:#8c1b1f;
     padding-bottom:13px;
     padding-top:17px;
     padding-left:10px;
     padding-right:10px; 
}

您可以使用以下代码为下拉菜单悬停指定CSS：

#nav_bar>ul>li>ul>li>a:hover {
      //styles here for dropdown menu hover
}

#nav_bar {
  background-color: #a22b2f;
  padding: 10px;
  box-shadow: 0px 2px 10px;
}
#nav_bar ul {
  text-align: center;
  padding-left: 0px;
}
#nav_bar ul li {
  display: inline-block;
}
#nav_bar ul li a {
  color: white;
  font-family: Arial;
  text-decoration: none;
  font-weight: bold;
  padding: 15px;
}
#nav_bar ul li ul {
  display: none;
}
#nav_bar ul li:hover ul {
  display: block;
  position: absolute;
  padding: 0px;
  background: white;
  padding: 10px;
  border: 1px solid black;
}
#nav_bar ul li:hover ul li {
  display: block;
}
#nav_bar ul li:hover ul li a {
  color: black;
}
#nav_bar>ul>li>a:hover {
  color: blue;
  background: #fff;
}
#nav_bar>ul>li>ul>li>a:hover {
  color: red;
  background: #000;
}

<div id="nav_bar">
  <ul>
    <li><a href="index.html">HOME</a>

    </li>
    <li><a href="status.html">STATUS</a>

    </li>
    <li><a href="info.html">INFO</a>

    </li>
    <li><a href="#">GAMEMODES</a>

      <ul>
        <li><a href="#">GAMEMODE - SURVIVAL</a>

        </li>
        <li><a href="#">GAMEMODE - PURE-PVP</a>

        </li>
        <li><a href="#">GAMEMODE - GAMESWORLD</a>

        </li>
      </ul>
    </li>
    <li><a href="rules.html">RULES</a>

    </li>
    <li><a href="vote.html">VOTE</a>

    </li>
  </ul>
</div>