Question

我有一个颜色为黑色的下拉菜单，当我将鼠标悬停在它上面时使用红色，我的问题是，当我去下拉菜单时，颜色从红色变为黑色，我想要的是例如我徘徊在左右的颜色左右会出现一个下拉菜单，当我转到即将变色的菜单时，我会想要颜色为红色，直到我离开下拉菜单。

HTML CODE

<ul class="drop_menu">
    <li>
      <a href="#">Home</a></li>
          <li><a href="#">about</a></li>
             <ul> 
               <li>contact us</li>
               <li>about us</li></ul>
          <li><a href="#">Home2</a></li>
</ul>

CSS代码

.drop_menu > li > a:hover {
          color: red;
        }
        .drop_menu li:hover ul {
        background: #484f57;
        }
        .drop_menu li:hover ul li a {
        display:block;
        background-color:#484f57;
        color: #ddd;
        }

Answer 1

您需要在<li>标记内移动子菜单，大致如此：

<ul class="drop_menu">
  <li><a href="#">Home</a></li>

  <li><a href="#">about</a>
    <ul>
      <li>contact us</li>
      <li>about us</li>
    </ul>
  </li>

  <li><a href="#">Home2</a></li>
</ul>

然后你可以使用：

.drop_menu li:hover a {
  color: red;
}

当<a>悬停在<li>上时，这会导致<ul>标记为红色，因为子菜单<li>现在位于父{{1}}内，颜色将会保持红色。

Here是一个演示，当鼠标悬停在子菜单上时，父菜单项的颜色为红色。

Answer 2

你需要使用.drop_menu的悬停选择器而不是在它上面使用它，这就是当你将鼠标从锚标签上移开时它当前会变回黑色的原因。

这样的事情，而不是：

.drop_menu:hover {
      color: red;
}

Answer 3

如果我理解你，请尝试使用：

.drop_menu a{
    color:black;
    text-decoration:none;
}
.drop_menu > li > a:hover {
  color: red;

}
.drop_menu li ul {
  display: none;

}
.drop_menu li:hover ul {
  display: block;
background: #484f57;
}
.drop_menu li:hover ul li a {
display:block;
background-color:#484f57;
color: #ddd;
}

html下拉菜单颜色

3 个答案: