HTML，CSS：颜色属性不能正常工作

我想构建一个网站，但由于某种原因，我的CSS颜色属性无法正常工作。我需要将下拉菜单中文字的字体颜色更改为白色。HTML，CSS：颜色属性不能正常工作

HTML代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>My Cycle - Home</title> 
     <link rel="stylesheet" href="css/style.css" type="text/css" /> 
    </head> 
    <body> 
     <header> 
      <div id="heading"> 
       <img src="http://i.imgsafe.org/5d32881.png" id="image_symbol"/> 
      </div> 
      <div id="navbar"> 
       <ul id="main_navbar"> 
        <li> 
         <a href="#" style="z-index: -1" class="active">Home</a> 
        </li> 
        <li class="dropdown"> 
         <a class="dropbtn" style="z-index: -1">Rent</a> 
         <div class="dropdown-content"> 
          <a href="rental/mountain_bikes.html">Mountain Bikes</a> 
          <a href="rental/hybrid_bikes.html">Hybrid Bikes</a> 
          <a href="rental/road_bikes.html">Road Bikes</a> 
          <a href="rental/city_bikes.html">City Bikes</a> 
         </div> 
        </li> 
        <li> 
         <a href="faq.html" style="z-index: -1">FAQ's</a> 
        </li> 
        <li> 
         <a href="about.html" style="z-index: -1">About</a> 
        </li> 
       </ul> 
       <ul id="sub_navbar"> 
        <li> 
         <a href="contact_us.html" style="margin-right: 15px">Contact Us</a> 
        </li> 
        <li> 
         <a href="sign_up.html">Sign Up</a> 
        </li> 
        <li> 
         <a href="log_in.php">Log In</a> 
        </li> 
       </ul> 
      </div> 
     </header> 
     <section> 

     </section> 
     <footer> 

     </footer> 
    </body> 
</html>

CSS代码：

body { 
    font-family: 'Open-sans', sans-serif, Helvetica; 
    text-align: center; 
    box-sizing: border-box; 
} 

#main_navbar { 
    text-align: center; 
    margin-top: 7px; 
    float: left; 
    padding-left: 0; 
} 

#main_navbar li, #sub_navbar li { 
    list-style-type: none; 
    display: inline-block; 
    min-width: 5em; 
} 

#main_navbar li a, #sub_navbar li a { 
    text-decoration: none; 
    font-size: 1em; 
    color: black; 
    font-weight: normal; 
} 

#sub_navbar { 
    float: right; 
    position: relative; 
    right: 15px; 
    bottom: 10px; 
} 

.dropdown { 
    position: relative; 
} 

.dropdown:active { 
    color: #32673f; 
} 

.dropdown-content { 
    display: none; 
    min-width: 150px; 
    transform: translate(15%,0); 
    position: absolute; 
    padding: 10px 0; 
    border-bottom: 1px solid #6b6767; 
    /*border-radius: 5px;*/ 
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
    background-color: black; 
} 

#image_symbol { 
    position: relative; 
    float: left; 
    bottom: 10px; 
    left: 0px; 
} 

header { 
    height: 40px; 
    width: 100%; 
    padding-right: 30px; 
    margin-left: -20px; 
    margin-top: -20px; 
    padding-top: 20px; 
    position: fixed; 
    opacity: 0.8 
} 

#sub_navbar li a:hover, #main_navbar li a:hover { 
    color: #FFCC00; 
} 

#sub_navbar li .active, #main_navbar li .active { 
    color: #09c; 
} 

header { 
    background-color: #f6f6f6; 
} 

.dropdown-content a { 
    display: block; 
    font-weight: normal; 
    text-align: left; 
    line-height: 2em; 
    font-size: 0.8em; 
    padding-left: 10px; 
    color: white; 
}

预先感谢您！

来源

2016-03-26 Shreyas Sreenivasa

请试试这个：

.dropdown-content a { 
    display: block; 
    font-weight: normal; 
    text-align: left; 
    line-height: 2em; 
    font-size: 0.8em; 
    padding-left: 10px; 
    color: white !important; 
}

来源

2016-03-26 07:54:42 satya

改成这样：

#main_navbar li > a, #sub_navbar li > a { 
    text-decoration: none; 
    font-size: 1em; 
    color: black; 
    font-weight: normal; 
}

来源

2016-03-26 07:53:33 Pedram

更改类，

dropdown-content a

到

#main_navbar .dropdown-content a

它不仅仅是颜色，但其他一些样式也可能不适用于下拉内容，因为它的偏好低于#main_navbar。你随时都可以选择放入!important，但请记住，!important不过是一种懒惰的黑客，只要有可能就应该避免。

来源

2016-03-26 08:05:35 Piyush

Thx的建议！ –

HTML，CSS：颜色属性不能正常工作

回答

相关问题