Problem with menu formatting

Question

I have the following menu:

And when passing over a session a vertical submenu should appear underneath (information, defenics and finish). The problem is it’s badly formatted. The submenu are appearing horizontally and on,conv,ata,+util are moving down to align with that horizontal submenu. When passing with the cursor over the session the submenu also stays with the hovere mouse format should not

Code

        <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>

This code is inside 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 on,conv,ata,+util are to move down to align with this horizontal submenu. When passing with the cursor over the session the submenu also stays with the hovere mouse format should not

Answer 1

Add first-Child to the Hover elements, so that their properties are not replicated in the submenu items. And to display 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;
}