html - 下拉子项的颜色变化

Question

简单地说，我有一个带有列表字段“按下”和“ map ”的下拉菜单，但是我似乎无法更改它们的颜色我似乎能够更改主列表项的颜色和其他一切看起来都很棒，但 children 似乎没有选择，也不确定如何为其创建元素...有人可以帮助这里的 html 和 css ...

<nav id="topnav">
    <ul class="clear">
      <li class="active first"><a href="index.html">Homepage</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="events.html">EVENTS</a></li>
      <li><a href="getinvolved.html">GET INVOLVED</a></li>
      <li><a href="gallery.html">GALLERY</a></li>
      <li class="last-child"><a class="drop" href="contact.html">CONTACT</a>
        <ul>
          <li><a href="press.html">PRESS</a></li>
          <li><a href="map.html">MAP</a></li>
        </ul>
      </li>
    </ul>
  </nav>

和CSS

@font-face {
    font-family: 'badaboom_bbregular';
    src: url('badabb__-webfont.eot');
    src: url('badabb__-webfont.eot?#iefix') format('embedded-opentype'),
         url('badabb__-webfont.woff2') format('woff2'),
         url('badabb__-webfont.woff') format('woff'),
         url('badabb__-webfont.ttf') format('truetype'),
         url('badabb__-webfont.svg#badaboom_bbregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
nav ul{margin:0; padding:0; list-style:none; font-family:'badaboom_bbregular';}

/* ----------------------------------------------Top Navigation-------------------------------------*/

#topnav{padding:10px 0;  clear:both; z-index:20;}
#topnav ul{margin:0; padding:0; list-style:none; text-transform:uppercase; font-size:1.9em;}
#topnav ul ul{z-index:9999; position:absolute; width:130px; text-transform:none;}
#topnav ul ul ul, #topnav ul ul ul ul{left:260px; top:0;}
#topnav ul li:last-child ul, #topnav ul li.last-child ul{right:0;}
#topnav ul.negative{left:-160px;}
#topnav li{position:relative; display:block; float:left; margin:0 0 0 20px; padding:0;}
#topnav li:first-child, #topnav li.first{margin-left:0;}
#topnav li li{width:100%; margin:0;}
#topnav li a{display:block; padding:0;}
#topnav li li a{display:block; margin:0; padding:10px 15px;}

#topnav ul ul{display:none;}
#topnav ul li:hover > ul{display:block;}

#topnav a{color:#c20505; font-weight:bold;}

#topnav li li a, #topnav li.active li a{color:#FFFFFF; font-weight:bold;}
#topnav li.active a, #topnav a:hover{color:#ffffff;}
#topnav ul li li:hover > a{color:#FFFFFF;}

#topnav li a.drop:hover {color:#FFF;}

#topnav li a.drop, #topnav li.active a.drop{padding-left:15px; background-image:url("images/dropdown_side.gif"); background-position:5px center; background-repeat:no-repeat;}

/* Top navigation for smaller resolutions */

#topnav form{display:block; height:30px; margin:0 auto; padding:0;}

#topnav form select option{display:block; margin:10px; padding:0; cursor:pointer; outline:none; border:none;}

Answer 1

这里的一个问题是您已经将样式应用于这些元素，因此您必须使用 CSS 特异性规则来实际将不同的样式应用于它们。

@joyBlanks 在评论中的大部分内容都是正确的，但问题在于您已经将某些内容应用于页面上的所有链接 (#topnav a) 和列表元素下的所有链接 (# topnav li a) 以及嵌套在列表元素中的列表元素下的所有链接 (#topnav li li a) 等，因此将其应用于 #topnav ul > li > ul > li 不会影响这些列表元素内的链接(伙计，这越来越罗嗦了)。

您将不得不更改其他适用的 CSS 属性，或者想出一些特定于您要更改的元素的内容。我做了后者。

这是我使用的 CSS:

#topnav ul > li > ul > li a{
    color:#c20505;
    font-size:13pt;
    padding:0px;
    margin-left:-20px;
}

我应该在这里提一下，颜色是您唯一询问的问题。我更改的其余部分只是为了在 fiddle 中看起来更好 - 完全没有必要。

我还添加了通用背景色 (#aaa)，这样我就可以在背景上看到白色文本。这是一个 fiddle :http://jsfiddle.net/zp1ryspj/