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

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

我不确定你的问题是不是关于你的 top-link 在没有悬停时变黑

发生这种情况的原因是您将鼠标悬停在 a 元素上。 a-标签默认是行内元素。这意味着它们只会占用与文本一样多的 space。

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

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

#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 它将不再起作用。所以去类 :).

问候蒂莫修斯

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

Make text in drop down menu white

html

css

navigation

hover