0

Eu tenho o seguinte menu:

inserir a descrição da imagem aqui

E ao passar por cima de sessao deve aparecer por baixo um submenu vertical(Informacoes,defenicoes e terminar). O problema é que está mal formatado. O submenu estao a aparecer na horizontal e sobre,conv,ata,+util estao a moverse para baixo para alinhar com esse submenu horizontal. Ao passar com o cursor em cima de sessao o submenu tambem fica com a formataçao de mouse hovere nao devia

Codigo

        <ul>

            <li><a href="?op=5" accesskey="5" title="">Sobre</a></li>
            <li><a href="?op=1" accesskey="2" title="">Convocatórias</a></li>
            <li><a href="?op=2" accesskey="3" title="">Atas</a></li>
            <li><a href='?op=6' accesskey='5' title=''>+ Utilizador</a></li> 
             <li><a href="logout.php">Sessao</a>
                 <ul>
                     <li><a href="#">informacao</a></li>
                     <li><a href="#">definicoes</a></li>
                     <li><a href="#">terminar sessao</a></li>
                 </ul>
            </li>       
        </ul>

Este codigo esta dentro de center div id="menu"       codigo         /div /center

#menu
{ 
    padding-left: 0;
display: inline-block;
padding: 5;
margin: 0;
text-align:center;
     z-index: 100;
}

#menu ul
{

    padding: 0;
margin: 0;

}

#menu li
{

    display: inline-block;

}

#menu li a, #menu li span
{

    display: inline-block;
    padding: 1em 1.5em 1em 1.5em;
    letter-spacing: 0.10em;
    text-decoration: none;
    font-size: 1.2em;
    text-transform: uppercase;
    outline: 0;
    color: #FFF;
}


#menu li:hover a, #menu li.active a, #menu li.active span
{
    color: dodgerblue;
    background:white; width:auto; height:auto;
     z-index: 100;
        display: inline-block;
}

#menu .current_page_item a
{
    background: #1757ae;
    /*border-radius: 30px;*/
    color: #FFF;
}
#menu li ul{
    display: none;
}
#menu li:hover ul{
    display: block;
    position: relative;
}
#menu li:hover li{
    float:none;
}

Menu sobre,conv,ata,+util estao a moverse para baixo para alinhar com esse submenu horizontal. Ao passar com o cursor em cima de sessao o submenu tambem fica com a formataçao de mouse hovere nao devia

inserir a descrição da imagem aqui

1
  • 2
    Poderia editar sua pergunta e substituir as imagens pelo código? :) Commented 8/04/2016 às 0:45

1 Resposta 1

1

Adicione first-child nos elementos hover, para que não sejam replicadas suas propriedades nos itens do submenu. E para exibir os itens verticalmente, utilize display:block; nos itens do submenu

#menu
{ 
padding-left: 0;
display: inline-block;
padding: 5;
margin: 0;
text-align:center;
     z-index: 100;
}

#menu ul
{

    padding: 0;
margin: 0;

}

#menu li
{

    display: inline-block;

}

#menu li a, #menu li span
{

    display: inline-block;
    padding: 1em 1.5em 1em 1.5em;
    letter-spacing: 0.10em;
    text-decoration: none;
    font-size: 1.2em;
    text-transform: uppercase;
    outline: 0;
    color: #FFF;
}


#menu li:hover a:first-child, #menu li.active a:first-child, #menu li.active span:first-child
{
    color: dodgerblue;
    background:white; width:auto; height:auto;
     z-index: 100;
        display: inline-block;
}

#menu .current_page_item a
{
    background: #1757ae;
    /*border-radius: 30px;*/
    color: #FFF;
}
#menu li ul{
    display: none;
}
#menu li:hover ul{
    display: block;
    position: relative;
}
#menu li:hover li{
    float:none;
}
#menu li ul li{
 display:block;
}
1
  • Menu sobre,conv,ata,+util estao a moverse para baixo para alinhar com esse submenu horizontal. Ao passar com o cursor em cima de sessao o submenu tambem fica com a formataçao de mouse hovere nao devia [![inserir a descrição da imagem aqui][1]][1] [1]: i.sstatic.net/3faYw.png
    – saimita
    Commented 8/04/2016 às 14:38

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 .