Preciso fazer com que o item do menu selecionado se mantenha marcado, após o usuario ir para o submenu. Por exemplo, no meu menu, existem item com até 3 submenus. Quando o usuario passa o mouse sobre o item, ele abre o submenu, mas não deixa nenhuma marcação no menu anterior. E se ele for ao 3ª nivel os 2 anteriores ficam aparecendo, mas sem nenhuma marcação que foram selecionados. Alguma sugestão?
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 */