Problema com menu horizontal com sub-itens

[Anderson Ferreira]

Boa noite galera,

Estou criando um menu horizontal com sub-itens, e estou com bastante dificuldades.

Peguei um semi-pronto, e refiz ele. Basicamente copie só o CSS.

Ele é totalmente puro, ou seja, só com HTML e CSS, sem JavaScript/jQuery.

Enfim, vamos ao que interessa.

O meu menu:

Nesta imagem, o mouse está em cima do item WordPress. Mais qria que quando tivesse sobre este item WordPress, o item CMS também ficasse azul (:hover).

O meu HTML:

<div id="submenuCategorias">
    <ul>
        <li>
            <a href="#desenvolvimento" title="">Desenvolvimento</a>
            <ul>
                <li>
                    <a href="#cms" title="">CMS</a>
                    <ul>
                        <li><a href="#wp" title="">Wordpress</a></li>
                    </ul>
                </li>
                <li><a href="#css" title="">CSS</a></li>
                <li><a href="#html" title="">HTML</a></li>
            </ul>
        </li>

        <li>
            <a href="#programacao" title="">Programação</a>
            <ul>
                <li><a href="#java" title="">C</a></li>
                <li><a href="#java" title="">Java</a></li>
                <li><a href="#visualbasic" title="">Visual Basic</a></li>
            </ul>
        </li>

        <li>
            <a href="#diversos" title="">Diversos</a>
            <ul>
                <li><a href="#humor" title="">Humor</a></li>
                <li><a href="#noticias" title="">Notícias</a></li>
            </ul>
        </li>
    </ul>
</div>

E meu CSS:

#submenuCategorias { margin-bottom: 20px; padding-bottom: 20px; border-bottom: #CCC 1px solid; }

#submenuCategorias ul, #submenuCategorias ul ul { height: 30px; background: url('../img/bg-submenuCategorias.png') repeat-x; line-height: 30px; }
#submenuCategorias ul li { position: relative; float: left; }
#submenuCategorias ul li a { padding: 0 10px; border-right: #FFF 2px solid; color: #545454; font-size: 14px; font-weight: bold; text-decoration: none; display: block; }
#submenuCategorias ul li a:hover { background: #00bbff; color: #FFF; text-decoration: none; }
#submenuCategorias ul li:hover ul ul, #submenuCategorias ul li:hover ul ul ul, #submenuCategorias ul li:hover ul ul ul ul { display: none; }
#submenuCategorias ul li:hover ul, #submenuCategorias ul li li:hover ul, #submenuCategorias ul li li li:hover ul, #submenuCategorias ul li li li li:hover ul { display: block; }
#submenuCategorias ul li:hover { background: #CCC; }
#submenuCategorias ul li ul ul  {left: 166px; margin-left: 9px; }
#submenuCategorias ul li ul { padding-bottom: 5px; background: #EEE; }
#submenuCategorias ul li ul li ul { background: #EEE; }
#submenuCategorias ul li ul a { min-width: 150px; border: #EEE solid; border-width: 5px 5px 0 5px; height: auto; background: #EEE; float: left; color: #545454; }
#submenuCategorias ul ul { min-width: 150px; height: auto; position: absolute; top: 30px; display: none; }
#submenuCategorias ul ul ul { top: auto; background: #CBCBCB; }

Já tentei usar:

#submenuCategorias ul li ul li a:hover { background: #000; }

Mais não funciona #BUA !

AJUDA ?!

OBRIGADO,

Anderson Ferreira