CSS menu marked after submenu

Question

I need to keep the selected menu item marked after the user goes to the submenu. For example, in my menu, there are items with up to 3 submenus. When the user hovers over the item, it opens the submenu, but leaves no markup in the previous menu. And if it goes to the 3rd level the previous 2 are appearing, but without any markup that were selected. Any suggestions?

HTML

  <div id="sidebar">

<li><a href="#">Bala Dura</a>
    <ul>
        <li><a href="../../ebsout/ge-oee/candy/Jan/ge-oee_bala_dura.xlsm">Janeiro/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/FEV/ge-oee_bala_dura.xlsm">Fevereiro/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/MAR/ge-oee_bala_dura.xlsm">Março/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/ABR/ge-oee_bala_dura.xlsm">Abril/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/MAI/ge-oee_bala_dura.xlsm">Maio/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/JUN/ge-oee_bala_dura.xlsm">Junho/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/JUL/ge-oee_bala_dura.xlsm">Julho/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/AGO/ge-oee_bala_dura.xlsm">Agosto/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/SET/ge-oee_bala_dura.xlsm">Setembro/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/OUT/ge-oee_bala_dura.xlsm">Outubro/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/NOV/ge-oee_bala_dura.xlsm">Novembro/2015</a>
        </li>

        <li><a href="../../ebsout/ge-oee/candy/DEZ/ge-oee_bala_dura.xlsm">Dezembro/2015</a>
        </li>

    </ul>
</li>

CSS:

#sidebar, sidebar ul { /* lists */
    padding: 0;
    margin-top: 15px; /** distancia entre barra e menus **/
    list-style-type:none;
    float : left;
    width : 12px;
    align: left;
    padding-bottom: 50px; /** empurra o rodape pra baixo **/
}

#sidebar li, #sidebar lp { /* all list items */
    position : relative;
    float : left;
    line-height : 1.85em;
    margin-bottom : -1px;
    width: 11em;
    list-style-type:none;
}

#sidebar li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 21.05em;
    margin-top : -2.60em;
}

#sidebar li ul ul { /* third-and-above-level lists */
    left: -999em;
}

#sidebar li a {
    width: 19em;
    w\idth : 20em;
    height: 30px; /** largura celulas **/
    line-height: 30px; /** alinhamento vertical **/
    display : block;
    color : #4F4F4F;
    font-weight : bold;
    text-decoration : none;
    background-color : white;
    border-top : 1px solid #BEBEBE;
    border-bottom : 1px solid #BEBEBE;
    padding : 0 0.5em;

}

#sidebar lp a { /* linha chocolate e candy */
    width: 19em;
    w\idth : 20em;
    height: 35px;
    line-height: 35px; /** alinhamento vertical **/
    display : block;
    color : #000000;
    font-weight : bold;
    padding : 0 0.5em;
    background-color : #696969;

}

#sidebar li a:hover {
    color: #000000;
    background-color: red;
    border: 1px solid red;

}

#sidebar li:hover ul ul, #sidebar li:hover ul ul ul, #sidebar li.sfhover ul ul, #sidebar li.sfhover ul ul ul {
    left: -999em;

}

#sidebar li:hover ul, #sidebar li li:hover ul, #sidebar li li li:hover ul, #sidebar li.sfhover ul, #sidebar li li.sfhover ul, #sidebar li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;

}

/* FIM CONTROLE DO MENU */

Answer 1

I think you need to join:

#sidebar > li:hover > a {
    color: #000000;
    background-color: red;
    border: 1px solid red;
}

You must have the :hover in the element li and using direct descendants (>) ensures that it only applies to the first anchor.

Example: http://jsfiddle.net/5336ye6s/