Html 我需要上哪一节课？

以下是JSFIDLE：

我有这个菜单，我正在尝试风格。一切都完成了，除了当菜单悬停时，我需要“大约”也变成蓝色。目前，当您将菜单悬停，然后将其子菜单悬停时，“ABOUT”将保持白色且不可见

有没有css大师可以帮我

谢谢大家!

纪尧姆

编辑：

正常状态： 我现在拥有的： 我想要什么： 我不想要的：

ps：这是JSFIDLE的html代码，因为我需要把它放在这里

<div class="test">

<nav class="primary-nav" id="nav-wrap">
                    <div class="sf-menu">
          <ul>
            <li class="page_item page-item-8 page_item_has_children"><a href="">About</a>
              <ul class="children">
                <li class="page_item page-item-16"><a href="">History / Mission / Vision</a></li>
                <li class="page_item page-item-1372"><a href="">Meet The Team</a></li>
                <li class="page_item page-item-1011"><a href="">Our Expertise</a></li>
                <li class="page_item page-item-20"><a href="">Our Clients</a></li>
                <li class="page_item page-item-21"><a href="">Our Partners</a></li>
                <li class="page_item page-item-22"><a href="">Careers</a></li>
                <li class="page_item page-item-507"><a href="">Case Studies</a></li>
              </ul>
            </li>
          </ul>
          </div>    
</nav>
</div>

当UL悬停在上方时，这将在标题上应用蓝色

编辑。假设您希望“About”菜单在悬停时有一个蓝色的标题，而“Products”菜单在悬停时有一个红色的标题，您将执行以下操作

.sf-menu ul#about-menu:hover .page_item_has_children > a#about-header{
  color: blue;
}
.sf-menu ul#products-menu:hover .page_item_has_children > a#products-header{
  color: red;
}

为要更改的每个项目添加ID。在您的例子中，它将是菜单标题的A标记（我在本例中还添加了一个“Products header”）

首先为菜单本身向UL添加一个id

<ul id="about-menu">

<ul id="products-menu">

如果你真的想，你现在也可以去掉一些css选择器。我不会，但这取决于你-这在一天结束时不会有什么不同

ul#about-menu:hover a#about-header{
  color: blue;
}
ul#products-menu:hover a#products-header{
  color: red;
}

---

希望对您有所帮助

您只需将id添加到

a

标记并将此代码放置到

css

：

#about:hover{
  color: blue !important;
}

---

您好，如果我只有一个菜单，您的解决方案就可以了。但是如果我有其他菜单，比如“关于”“这也改变了他们。有什么想法吗？这应该适用于使用相同结构的所有菜单。我将编辑我的答案，告诉你如何做我认为你应该做的事情。同时，我尝试做一些事情，用你的最后一个答案，我编辑了我的原始问题，告诉你我到底想要什么。您的第一个解决方案显示在最后一张图片中。我不认为我不能添加ID，因为coide是由某些东西生成的。也许我可以使用“page-item-x”类？你试过我给你的第一个CSS吗？这应该行得通。你可以使用“page-item-x”类，它会使你的css看起来像这样：

。sf菜单ul:hover.page_-item-x>a{color:blue；}

Edit:现在我看到了问题。使用上面的css，把这个css添加到所有内容中应该都很好：.sf菜单ul:hover.page-item-8>a{color:#0c0035；}。sf菜单ul:hover.page-item-10>a{color:}.sf菜单ul:hover.page-item-12>a{color:}.sf菜单ul:hover.page-item-14>a{color:}.sf菜单ul:hover.page-item-965>a{color:}

ul#about-menu:hover a#about-header{
  color: blue;
}
ul#products-menu:hover a#products-header{
  color: red;
}

#about:hover{
  color: blue !important;
}