简体   繁体   中英

change font/text color in the navigation bar

I want to change the font color of my navigation bar. I tried color:xxx; font color:xxx; everywhere it is not working. I am thinking something is canceling it out but I can not figure out what. I what to change it from red to white. Thanks in advance

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; }

change your css to this.I only concerned about your text color and background color,

  ul li{
    background-color: red;
  }

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

  ul li:hover{
    background: white;
  }

  ul li a:hover{
    color: red;
  }

Try !important in css

color : XXX !important

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM