Question

我正在尝试创建一个使用子菜单的网站导航栏。使用我可以通过互联网收集的任何内容，我已经尽了最大的努力并且让一个人处理了一个小问题。

当您将鼠标悬停在子菜单上时，主菜单文本颜色不会像我希望的那样保持白色。任何人都可以让这个工作吗？

.header nav.site_nav {
  float: right;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.header ul a {
  display: block;
  font-weight: bold;
  color: #2C395D;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 8px 8px 8px;
}

.header ul a:hover {
  color: white;
}

.header ul li {
  float: left;
  position: relative;
  margin: 0 2px 0 2px;
}

.header ul li:hover {
  background: #2C395D;
}

.header ul ul {
  display: none;
  position: absolute;
  text-align: right;
  top: 100%;
  right: 0;
}

.header ul ul li {
  float: none;
  width: 150px;
  background: #BFC8E1;
  margin: 0;
}

.header ul li:hover > ul {
  display: block;
}

jsfiddle code

Answer 1

如果不向html添加更多信息，我无法轻松完成此操作。我在所有顶级菜单项中添加了一个类，然后在悬停时添加了少量的css使它们变白。

Updated Fiddle

将此课程添加到html中的顶级菜单项：

<a class="topLevel" href="#">Courses &#x25BE;</a>

将此添加到您的CSS：

.header ul li:hover a.topLevel  {
  color: white;
}

导航栏只有子菜单html和css

1 个答案: