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

【问题标题】：Make text in drop down menu white将下拉菜单中的文本设为白色
【发布时间】：2015-05-29 14:07:57
【问题描述】：

这是我的网站.. 当您将鼠标悬停在导航项目上并出现下拉列表时，我希望下拉列表永久具有白色文本，而不是变成白色。

另外，如果有人知道如何制作，那么当您将鼠标悬停在菜单项上时，单词下方会出现一条黑线，而不是单词的整个背景变黑？

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>

【问题讨论】：

你的 HTML 有很多语法问题
是的...我只是一个初学者！大声笑
要么给你想改变的元素添加一个类，要么使用#nav ul li ul li a { color: #FFF;这只会将您的下拉元素变为白色。但我建议为这些元素添加一个类以供参考。另外，把 text-decoration: underline;而不是悬停时的黑色背景。

标签： html css navigation hover

【解决方案1】：

我不确定您的问题是否是关于您的顶部链接在未悬停时变黑

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

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

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

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

至于黑线。您可以在li-elements（如果您希望它是完整的长度）或您的a-elements（如果您希望它只与您的话一样长）添加一个边框底部

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

编辑：这是解决悬停时顶部菜单项变黑的问题。这是您的问题还是您想更改子项的颜色？

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

#nav li li a
{
    color:white
}

【讨论】：

他也可能需要前后声明
非常感谢您的出色工作！花了我这么长时间才弄清楚，我不太擅长这个哈哈
没问题。很高兴帮助:)

【解决方案2】：

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

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

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

此外，如果您需要更改 html 树，或者不使用列表，也许 div 将不再起作用。所以去上课:)。

问候提摩太

【讨论】：