Problem with menu formatting

Question

Problem with menu formatting

Navigation

#1 by (1 votes)

0

I have the following menu:

Andwhenyougooverthesessionyoushouldseeaverticalsubmenubelow(Information,DefinitionsandFinish).Theproblemisthatitispoorlyformatted.Thesubmenuaredisplayedhorizontallyandover,conv,ata,+utilaremovingdowntoalignwiththishorizontalsubmenu.Whenpassingwiththecursorontopofthesessionthesubmenualsohasmouseformattinghovereshouldnot

Code

<ul><li><ahref="?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>

This code is inside the center div id="menu" code / 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 over, conv, ata, + util is moving down to align with this horizontal submenu. When passing with the cursor on top of the session the submenu also has mouse formatting hovere should not

css menu

asked by anonymous 08.04.2016 / 01:26

1 answer

Get childView position in ExpandableListView Searching for a word in a range in the phrase

score 1 · Accepted Answer

Add first-child to hover elements, so that their properties do not replicate to submenu items. And to display the items vertically, use display:block; in the submenu items

#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;
}