无法使用css更改导航栏上的字体颜色

时间:2016-01-23 22:50:45

标签: css css3

我无法更改导航栏上的字体颜色,而不是HTML。

<div id="nav" class = "menu">

        <ul>
            <li><a href="index.htm">Home</a></li>

            <li><a href="pages/our-team.htm">Team members</a>
                <ul class ="sub-menu">
                    <li><a href="#">F.E.A.R Ballard</a></li>
                    <li><a href="#">F.E.A.R Snakeshit</a></li>
                    <li><a href="#">Redi</a></li>
                </ul>
            </li>

            <li><a href="pages/cool-stuff.htm">Cool Stuff</a></li>

            <li><a href="pages/Gallery.htm">Gallery</a>
                  <ul class ="sub-menu">
                    <li><a href="#">Squad</a></li>
                    <li><a href="#">Dayz</a></li>
                    <li><a href="#">Arma III</a></li>
                </ul>
            </li>

            <li><a href="pages/contact-us.htm">Contact</a>
                <ul class ="sub-menu">
                    <li><a href="#">Teamspeak</a></li>
                    <li><a href="#">E-mail</a></li>
                </ul>
            </li>

            <li><a href="https://www.facebook.com/groups/437620509632564/">Facebook</a></li>
            <li><a href="http://steamcommunity.com/groups/Ballard">Steam</a></li>
        </ul>
      </div><!-- links -->

和CSS

.menu       {
             margin: 0px;
             width: auto;
            }
.menu li    {
             margin: 0px;

            }
              /*----- Top Level -----*/
.menu ul li {

    display: inline-block;
    position: relative;
    font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}
.sub-menu {
    width: 100%;
    border-top: none;
    border-left: 1px solid green;
    border-right: 1px solid green;
    margin: 0px;
    position: absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    }
.sub-menu li {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    padding-bottom: 2px;
    border-bottom: 1px solid green;
}

.sub-menu li a {
    padding:10px 30px;
    margin: 5px;
    display:block;
}
#nav     {
         display: inline;
         width: 100%;
         height: 150px;
         background-color: #879396;
         }
#nav ul   {
         text-align: center;
         padding: 0px;
         background-color: #9C9898;
         }
#nav li   {
          width: 105px;
          background-color: #9C9898;
          }
#nav li a {
         padding: 0px;
         margin: 1px;
         }
#nav li a:link
             {
             text-decoration: none;
             font-color: #000;
             font-weight: bold;
             }

我尝试了很多东西,我现在似乎无法让字体颜色改变。请注意我只想让字体改变颜色,它目前是红色和蓝色,看起来很可怕。

我已经离开游戏太久了,请指教。

2 个答案:

答案 0 :(得分:1)

试试这个

correct_array

请记住,CSS中的#nav li a { color: green; } 而不是color:value。另外,不需要将font-color添加到标签。只需使用:link代替a,除非您确实需要将链接定位到实际的a:link

答案 1 :(得分:0)

您必须为锚标记提供颜色,因为它不会继承颜色

检查这个小提琴

a {color: #fff;}

https://jsfiddle.net/Med7at/j4fxj7gw