html - 将下拉菜单中的文本设为白色

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
}