1

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 */
0

1 Resposta 1

7

Acho que precisa juntar:

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

Tem de ter o :hover no elemento li e usando descendentes diretos (>) garante que só se aplica à primeira âncora.

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

3
  • 1
    EXATAMENTE! Sérgio, muito obrigado! Quebrei a cabeça mais de 3 horas e você em 5 minutos resolveu. Grande abraço e obrigado!
    – Diego
    Commented 2/12/2014 às 19:12
  • Já marquei. Deixa te pedir um última coisa. Se eu tiver mais um nível (2º para 3º), como faço para manter o 2º marcado?
    – Diego
    Commented 2/12/2014 às 19:17
  • @Diego pode seguir a mesma lógica e juntar > li > ul diretamente a seguir ao #sidebar
    – Sergio
    Commented 2/12/2014 às 19:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .