css - 1 つのサブメニューの色が変わったが、残りは正しい

Question

1 つのサブメニューに問題があります。上部のメイン メニュー (1) から色を取得する代わりに、次のメイン メニュー (2) から色を取得します。これはサブメニューのリストの 3 番目です。4 番目を追加すると、次のメイン メニュー (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>