html - 更改导航栏中的字体/文本颜色

标签 html css

我想更改导航栏的字体颜色。我试过颜色:xxx;字体颜色:xxx;到处都不起作用。我在想有什么东西正在抵消它,但我不知道是什么。我怎么把它从红色变成白色。提前致谢

HTML:

 <ul id="drop-nav">
      <li><a href="homepage.html">Home</a></li>
      <li><a href="parks.html">Parks</a>
        <ul>
          <li><a href="magickingdom.html">Magic Kingdom</a></li>
          <li><a href="epcot.html">EPCOT</a></li>
          <li><a href="hollywoodstudios.html">Hollywood Studios</a></li>
      <li><a href="animalkingdom.html">Animal Kingdom</a></li>
        </ul>
      </li>
      <li><a href="kids.html">Kids</a></li>
      <li><a href="discounts.html">Discounts</a></li>
      <li><a href="events.html">Events</a></li>
      <li><a href="tips.html">Tips</a></li>

  </ul>

CSS:

<style type="text/css">
  ul {  /*remove bullets & margins & padding from list*/
    list-style: none;padding: 0px;margin: 2px; 
  }

  ul li {  /*navigation bar*/
    display: block;
    position: relative;
    float: left;
    border:2px solid black;
    font-size: 20px;
    width: auto;
    text-align: center;
    margin-left: 85px;
`  `margin-bottom: 30px;
`  `background-color: black;
      }
  li ul {display: none; }
  ul li a {display: block; background: red; padding: 5px 10px 5px 10px; text-decoration:none;
            white-space: nowrap; color: white; border: 2px solid black;
           }
   ul li a:hover {background: red; }
  li:hover ul {display: block; position: absolute; left: auto; right: 0; margin-right: -60px; }
  li:hover li {float: none;}
  li:hover a {background: red;text-decoration: none; color: black; text-align: center;  }
  li:hover li a:hover {background: #000; color: red;}
  #drop-nav li ul li {border-top: 0px; }

最佳答案

把你的css改成这个。我只关心你的文字颜色和背景颜色,

  ul li{
    background-color: red;
  }

  ul li a{
    text-decoration: none;
    color: white;
  }

  ul li:hover{
    background: white;
  }

  ul li a:hover{
    color: red;
  }

关于html - 更改导航栏中的字体/文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35306708/

相关文章:

javascript - 使用剑道创建一个单选按钮自定义(更改背景颜色)

php - 代码点火器 undefined variable 结果问题

html - 如何在 react 中画线

html - 悬停时的图像过渡

css - 图像上方按钮的固定位置

jquery - 在播放动画之前等待元素出现在 View 中

javascript - 单击时阻止 jquery 动画多次执行

css - 如何在 WordPress 中为 Google +1 按钮设置填充/边距?

html - CSS下拉列表中元素的对齐

css - 使用 flexbox css 的响应表