Problem with menu

While hovering over it, it turns blue and I wanted it to stay blue while I hovered over the submenu

cogigo:

<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  style="text-decoration: none;float:none;width:120px">
            <li><a href="#" style=" background: black; width: 120px;text-decoration: none;">Informacao</a></li>
            <li><a href="#" style="background: black;width: 120px;text-decoration: none;">Definicões</a></li>
            <li><a href="logout.php" style="background: black;width: 120px;text-decoration: none;">Terminar</a></li>
        </ul>
    </li>
</ul>

css:     menu     {         padding-left: 0;         display: inline-block;         padding: 5;         margin: 0;         text-align: center;     }

menu ul
{
    padding: 0;
    margin: 0;
}

menu li
{
    float:left;
}

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 a:hover
{
    color: dodgerblue;
}
menu li a:hover
{
    color: dodgerblue;
}
menu li ul li 
{
    color: dodgerblue;
}

menu li:hover
{
    color: dodgerblue;
    background:white;      
}
menu li ul
{
    display: none;  
}
menu li:hover ul{
    display: block;
    position:absolute;
    z-index:20;
    color: dodgerblue;
} 
menu li ul
{
    color: dodgerblue;
}
menu li:hover li{
    float:none;
}
menu li ul li{
    display:block;
    background: black;
}