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

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
}

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;