html下拉菜单颜色答案

【问题标题】：html drop down menu colorhtml下拉菜单颜色
【发布时间】：2014-04-29 23:00:30
【问题描述】：

我有一个黑色的下拉菜单，当我将鼠标悬停在它上面时我使用红色，我的问题是当我进入下拉菜单时颜色从红色变为黑色，我想要的是例如我将鼠标悬停在大约变红的颜色上会出现一个下拉菜单，当我进入那个即将上色的菜单大约变回黑色时，我希望颜色为红色，直到我离开下拉菜单。

HTML 代码

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

【问题讨论】：

你能做个小提琴吗？当我使用您提供的代码制作一个时，很明显我们缺少 css。
jsfiddle.net/5LwBb

标签： html css

【解决方案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;
}

这将导致<li> 悬停在<li> 上时<a> 标记为红色，因为子菜单<ul> 现在位于父<li> 中，所以颜色将保持红色。

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

【讨论】：

它不起作用，当我移动到子菜单时，邻接的颜色变为黑色，我想要的是当我移动到子菜单时，我想要的颜色即将变为红色。跨度>
您希望背景颜色为红色？目前，链接在悬停时变为红色，子菜单的背景为黑色。您所要做的就是将样式添加到同一个选择器中。因此，如果您希望背景变为红色，请添加“背景颜色：红色；”到.drop_menu li:hover ul 选择器
我不希望背景为红色，我希望文本的颜色为红色，我认为您不理解我的问题，我的问题是：当我将鼠标悬停在菜单上时菜单中文本的颜色变为红色，但是当我移动到子菜单时，菜单中的文本颜色变为黑色，即使我移动到子菜单，我也希望菜单中的文本颜色为红色。

【解决方案2】：

您需要对 .drop_menu 使用悬停选择器，而不是在 .drop_menu 上使用它，这就是为什么当您将鼠标从锚标记上移开时它会变回黑色的原因。

改为这样：

.drop_menu:hover {
      color: red;
}

【讨论】：

【解决方案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;
}

【讨论】：