Question

这是我的网站..当您将鼠标悬停在导航项目上并显示下拉列表时，我希望下拉列表永久保留白色文字，而不是变为白色。

此外，如果有人知道怎么做，当你将鼠标悬停在菜单项上时，单词下面会出现一条黑线而不是整个单词的背景变黑？

http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/www_root/

#nav {
  padding: 50px;
  width: 924px;
  height: 100px;
  float: none;
}
#nav ul {
  list-style: none;
  margin-left: 5px;
  width: 1000px;
  display: table;
}
#nav a {
  text-decoration: none;
  color: #161717;
}
/*hide sub menu*/

#nav li ul {
  display: none;
}
/*show and position*/

#nav li:hover ul {
  display: block;
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
}
/*main nav*/

#nav li {
  width: 140px;
  font-size: 14px;
  display: inline-block;
  -webkit-transition: all ease 0.3s;
}
#nav li:hover {}
/*sub nav*/

#nav li li {
  color: white;
  display: block;
  background-color: black;
  font-size: 11px;
  padding-top: 5px;
  padding-left: 5px;
  width: 100px;
}
#nav li li:hover {
  background-color: #A83133;
}
#nav a:hover {
  color: white;
}

<div id="nav">

  <div id="firstnav">

    <ul>
      <span class="font4"><li><a href="#">SIGN IN</a></li>
    <li><a href="#s1">SIGN UP</a></li>
    <li><a href="#s2">MY TRIP</a></li>
    </ul></span>
  </div>


  <ul>
    <li><a href="#1">DESTINATIONS</a>
      <ul>

        <li><a href="#1.1">Popular Places</a>
        </li>
        <li><a href="#1.2">Other places</a>
        </li>
      </ul>
    </li>

Answer 1

我不确定你的问题是关于你的上层链接在没有被徘徊时转向黑色

发生这种情况的原因是你将悬停在你的a元素上。 a - 标签默认为内联元素。这意味着他们只会占用与文本一样多的空间。

这意味着当您将鼠标悬停在li元素上时，链接上的悬停不再有效。

当您将鼠标悬停在li元素上时，可以更改链接的颜色。

#nav li:hover a {
   color:white;    
}

至于黑线。你可以在你的li - 元素（如果你想让它成为全长）或你的a - 元素（如果你希望它只与你的单词一样长）添加一个边框底部）

#nav li:hover
{
   border-bottom: 1px solid #000;
}

修改：这是悬停时顶部菜单项变黑的解法。这是您的问题还是您想要更改子项目的颜色？

如果是这样，您可以执行以下操作

#nav li li a
{
    color:white
}

Answer 2

所以子菜单应该总是有白色文字吗？

#nav ul li ul a {
    color:#ffffff;
}

但我建议用类来做...所以你没有这么大的选择器，你可以轻松地在其他页面上使用这种样式。

此外，如果您需要更改html树或使用列表而不是使用div它将不再工作。所以上课：）。

问候timotheus

在下拉菜单中将文字设为白色

2 个答案: