Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Diego Venuzka

Menu CSS manter marcado ao acessar submenu

Recommended Posts

Boa tarde

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 (exemplo):

  <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 (exemplo)

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Movido:

 

PHP :seta: CSS

 

#sidebar li:hover { background: red; }

Compartilhar este post


Link para o post
Compartilhar em outros sites

Resolvi inserindo esse codigo:

#sidebar > li:hover > a{  /** aqui mantem o menu anterior marcado (PRIMEIRO PARA SEGUNDO) **/
    color: #000000;
    background-color: red;
    border: 1px solid red;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.