Question

简单地说，我有一个下拉菜单，列表字段“按”和“地图”但是我似乎无法改变它们的颜色我似乎能够改变主列表项的颜色和其他一切看起来很棒，但似乎没有儿童的选择，也不确定如何为它创建项目......有人可以帮助这里是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不会影响这些列表元素中的链接（man is this is得到罗嗦）。

您必须更改其他适用的CSS属性，或者提供特定于您要更改的元素的内容。我做了后者。

这是我使用的CSS：

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

我应该在这里提一下颜色是你唯一要问的颜色。其余的我改变只是为了在小提琴中看起来更好 - 完全没必要。

我还添加了通用背景色（#aaa），这样我就可以看到背景上的白色文字了。这是一个小提琴：http://jsfiddle.net/zp1ryspj/

下降儿童的颜色变化

1 个答案: