1

我的一个子菜单有问题。它不是从顶部的主菜单 (1) 中获取颜色，而是从下一个主菜单 (2) 中获取颜色。它在子菜单列表中排名第三，如果我添加第四个，则该菜单从以下主菜单 (3) 中获取颜色。然而，我有来自主菜单 2 和 3 的子菜单，它们工作得很好。

#header ul {
    margin:auto;
    padding: 1px; 
    list-style: none;
    float:right;
    position:relative;
    right:50%;
}
#header ul li {
    margin:0 0 0 0px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
}
#header  ul li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight:normal;
    color: #069;
    background:transparent;
}

有任何想法吗？

#header ul li:first-child a {
    color:#F60;
}
#header  ul li:nth-child(2) a{
    color:#099;
}
#header ul li:nth-child(3) a{
    color:#C0C;
}
#header ul li:nth-child(4) a{
    color:#09F;
}
#header ul li:nth-child(5) a{
    color:#F60;
}
#header ul li:nth-child(6) a{
    color:#e0b51e;
}
#header ul li:nth-child(7) a{
    color:#F0F;
}
#header ul li:nth-child(8) a{
    color:#93C;
}
#header ul li:nth-child(9) a{
    color:#690;
}
#header ul li a:hover {
    color:#00C;
    text-decoration:underline;
    background:#dff4f3; /* Top menu items background colour */
}  
#header ul li:hover a,
#header ul li.hover a { /* This line is required for IE 6 and below */
   background:#dff4f3; /* Top menu items background colour */
}   
/* Submenu items */
#header ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:13em; /* width of the drop-down menus */
}
#header ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
}
#header ul ul li a,
#header ul li.active li a,
#header ul li:hover ul li a,
#header ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:.9em;
   font-weight:normal; /* resets the bold set for the top level menu items */
   background:#dff4f3;
   border-bottom:1px solid #ccc; /* sub menu item horizontal lines */
}
#header ul ul li a:hover,
#header ul li.active ul li a:hover,
#header ul li:hover ul li a:hover,
#header ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:#dff4f3; /* Sub menu items background colour */
   color:#00C;
}

/* Flip the last submenu so it stays within the page */
#header ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#header ul li:hover ul,
#header ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}

和 html 是

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a>
            <ul>
            <li><a href="history.html">History of the Charity</a></li>
            <li><a href="funding.html">Funding</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            </ul>
            </li>
        <li><a href="help.html">Do you need help?</a>
            <ul>
            <li><a href="help.html#sup-gardening">Supported Gardening</a></li>
            <li><a href="new-beginnings.html">New Beginnings</a></li>
            <li><a href="jobdone.html">Job Done Project</a></li>
            </ul>
        </li>
        <li><a href="support-services2col.html">Support Services</a>
        <ul>
            <li><a href="support-nhs.html">Health Practitioners</a></li>
            <li><a href="support-schools.html">Educational Practitioners</a></li>
         </ul>
         </li>
        <li><a href="vol2col.html">Volunteers</a></li>
        <li><a href="timetable.html">Timetable</a></li>
        <li><a href="contact.html">Contact</a></li>
     </ul>
4

1 回答 1

0

小提琴

问题出在这里：

#header ul li:nth-child(3) a{
    color:#C0C;
}

上面的 CSS 规则每隔三分之一将颜色更改为# C0C。 li ul#header

您必须更具体地使用选择器并用>这样的符号将它们分开

#header > ul > li:nth-child(3) a{

>是一个immediate child选择器。不同之处在于您键入时

ul#menu li

它将匹配所有嵌套更深li的内部，例如ul

<ul id="menu">
    <li> //this will obviously match the CSS rule
        <ul>
            <li></li> //this will also match!
        </ul>
    </li>
</ul>

但是当你输入

ul#menu > li

只有直接 li的孩子ul才会匹配：

<ul id="menu">
    <li> //only this will match
        <ul>
            <li></li>
        </ul>
    </li>
</ul>
于 2013-10-11T11:56:07.013 回答