Question

我对HTML / CSS还是很陌生，我没有经过正规的培训，只是一起做科学怪人的事情。现在，我在主导航菜单的末尾有一个下拉菜单。问题是下拉菜单中的链接-我需要它们是较深的颜色，但它们不会从主导航菜单的浅色中更改。不管我尝试什么，颜色总是一样的！由于某种原因，我什至可以更改列表上项目符号的颜色（我也需要删除它的颜色，但这很容易），但是文本保持不变。

感谢任何帮助。：-）

/* (1/3) MAIN NAVIGATION BAR */

#navbar {
  overflow: hidden;
  background-color: #999900;
  font-family: caviar-dreams;
}


/* (2/3) NAVIGATION LINKS */

#navbar a {
  float: left;
  color: #f2f2f2;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 20px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
}


/* (3/3) NAVIGATION LINKS */

#navbar a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
}


/* (1/7) DROPDOWN MENU CONTAINER */

.dropdown {
  overflow: hidden;
}


/* (2/7) DROPDOWN MENU BUTTON */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding-top: 5px;
  vertical-align: middle;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}


/* (3/7) DROPDOWN BUTTON HOVER COLOR */

.dropdown:hover .dropbtn {
  background-color: #8d7b8a;
}


/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  border: 1px dashed #b89abe;
  width: auto;
}


/* (5/7) DROPDOWN LINKS */

.dropdown-content a {
  float: none;
  color: black;
  background-color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* (6/7) DROPDOWN LINKS HOVER */

.dropdown-content a:hover {
  background-color: #8d7b8a;
}


/* (7/7) SHOW DROPDOWN MENU ON HOVER */

.dropdown:hover .dropdown-content {
  display: block;
}


/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
    {color:green;
    background-color: blue;
    list-style-type: none;
    } */

<!DOCTYPE html>
<div class="wrapper">
  <link href="style.css" rel="stylesheet" type="text/css">
  <!--| NAVIGATION BAR (1/2) |-->
  <div id="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
    <div class="dropdown">
      <button class="dropbtn">Drop Down Menu</button>
      <div class="dropdown-content">
        <ul>
          <li><a href="#">Art Education</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Custom Projects</a></li>
          <li><a href="#">Events and Parties</a></li>
          <li><a href="#">Studio Work</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Shop</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

问题在于，id在CSS层次结构中比类更高。因此，#navbar a将始终覆盖.dropdown-content a。

您可以尝试以下操作：#navbar .dropdown-content a。

或者您可以改写为#navbar > a。这只会定位到导航栏的直接子项的锚标记。因此它应该忽略下拉菜单中的定位标记。

或更妙的是，不要使用id。在类上使用id并不会带来很多好处，并且它往往会导致出现此类问题。

Answer 2

这应该为您工作。您只需要一个更具体的选择器即可覆盖id。

/* (1/3) MAIN NAVIGATION BAR */

#navbar {
  overflow: hidden;
  background-color: #999900;
  font-family: caviar-dreams;
}


/* (2/3) NAVIGATION LINKS */

#navbar a {
  float: left;
  color: #f2f2f2;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 20px;
  padding-left: 15px;
  text-transform: uppercase;
  text-decoration: none;
}


/* (3/3) NAVIGATION LINKS */

#navbar a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
}


/* (1/7) DROPDOWN MENU CONTAINER */

.dropdown {
  overflow: hidden;
}


/* (2/7) DROPDOWN MENU BUTTON */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding-top: 5px;
  vertical-align: middle;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}


/* (3/7) DROPDOWN BUTTON HOVER COLOR */

.dropdown:hover .dropbtn {
  background-color: #8d7b8a;
}


/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  border: 1px dashed #b89abe;
  width: auto;
}


/* (5/7) DROPDOWN LINKS */

#navbar .dropdown-content a {
  float: none;
  color: black;
  background-color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* (6/7) DROPDOWN LINKS HOVER */

#navbar .dropdown-content a:hover {
  background-color: #8d7b8a;
}


/* (7/7) SHOW DROPDOWN MENU ON HOVER */

.dropdown:hover .dropdown-content {
  display: block;
}


/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
    {color:green;
    background-color: blue;
    list-style-type: none;
    } */

<!DOCTYPE html>
<div class="wrapper">
  <link href="style.css" rel="stylesheet" type="text/css">
  <!--| NAVIGATION BAR (1/2) |-->
  <div id="navbar">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
    <!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
    <div class="dropdown">
      <button class="dropbtn">Drop Down Menu</button>
      <div class="dropdown-content">
        <ul>
          <li><a href="#">Art Education</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Custom Projects</a></li>
          <li><a href="#">Events and Parties</a></li>
          <li><a href="#">Studio Work</a></li>
          <li><a href="#">Photo Gallery</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Shop</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS：样式化下拉菜单列表，但链接样式不会与主导航样式相同

2 个答案: