Szukam porady na ten temat.

Jakiś czas temu przeszedłem samouczek, aby zbudować rozwijane menu CSS i nie mogę zmienić domyślnego koloru podmenu - zawsze pasuje do domyślnego czerwonego koloru znacznika.

Od jakiegoś czasu bawię się tym i nie mogę znaleźć rozwiązania. Czy ktoś może mi w tym pomóc?

Oto html:

  <nav>
      <ul>
         <li><a class="selected" href="index.html">Home</a></li>
         <li><a href="clothing.html">Clothing</a></li>
         <li><a href="gear.html">Gear</a></li>
         <li><a href="brand.html">Brand</a>
             <ul>
                 <li><a href="#">XXXXXX</a></li>
                 <li><a href="#">XXXXXX</a></li>
             </ul>
         </li>
         <li><a href="fighter.html">Fighters</a>
             <ul>
                 <li><a href="#">XXXXXX</a></li>
                 <li><a href="#">XXXXXX</a></li>
             </ul>
         </li>
         <li><a href="account.html">My Account</a></li>
      </ul>
   </nav>

A oto CSS:

   nav {
        position:relative;
        float:right;
        font-size:14px;
        margin-top:35px;
        font-weight:bold;
        padding-right:178px;
        z-index:4;
    }
    nav ul ul {
        display:none; /* hide sub menus */
    }
    nav ul li:hover > ul {
        display:block; /* show sub menus on hover */
    }
    nav ul {
        float:right;
        font-size:14px;
        margin-top:-3px;
        text-transform:uppercase;
        list-style:none;
        position:relative; /* position sub menu according to nav */
        display:inline-table; /* condense with of sub menu to fit */
    }
    nav ul:after {
        content:"";
        clear:both;
        display:block; /* clear floats on other list items */
    }
    nav ul li {
        float:left;
    }
    nav ul li:hover a {
        color:#ee1f3b;
        text-decoration:none;
        -webkit-transition-property:color; 
        -webkit-transition-duration:0.2s, 0.2s; 
        -webkit-transition-timing-function:linear, ease-in;
        -moz-transition-property:color; 
        -moz-transition-duration:0.2s, 0.2s; 
        -moz-transition-timing-function:linear, ease-in;
    }
    nav ul li a {
        padding:4px 11px;
        text-decoration:none;
        color:#000000;
        display:block;
        text-decoration:none;
    }
    nav ul ul {
        background:#cacaca;
        position:absolute;
        top:25px; /* sub position */
    }
    nav ul ul li {
        float:none; 
        border-bottom:1px solid rgba(0, 0, 0, 0.2);
        position:relative;
    }
    nav ul ul li:last-child {
        border-bottom:1px solid rgba(0, 0, 0, 0.2);
    }
    .selected {
        color:#ee1f3b;
    }   
    nav ul ul li a:hover {
        color:#000000;
    }

Dziękuję za Twój czas.