DropDown Menu in CSS

Good afternoon, people,

How do I make the dropdown work in the menu I created?    Hiding the dropdown of what we do was easy, but how do I make it appear with the mouse over the "what do we do" option?    I tried putting an id and hover property but it did not work ...

<nav>
            <ul class="main_menu">
                <li><a href="#" class="li_principal">Home</a></li>
                <li><a href="#" class="li_principal">Quem Somos</a></li>
                <li><a href="#" class="li_principal">O que fazemos</a>
                    <ul>
                        <li><a href="#" class="li_secundario">Criação de WebSites</a></li>
                        <li><a href="#" class="li_secundario">SEO</a></li>
                        <li><a href="#" class="li_secundario">Design Gráfico</a></li>                    
                        <li><a href="#" class="li_secundario">Hospedagem de Sites</a></li>
                        <li><a href="#" class="li_secundario">Gerenciamento de Redes Sociais</a></li>
                        <li><a href="#" class="li_secundario">Branding</a></li>
                        <li><a href="#" class="li_secundario">E-mail Marketing</a></li>
                    </ul>
                <li><a href="#" class="li_principal">Portifólio</a></li>
                <li><a href="#" class="li_principal">Contato</a></li>                
            </ul>
        </nav>

My css looks like this:

.main_menu li{
    float:left;
}

.li_principal{
    float:left;
    font-size:30px;
    font-family:"Verdana";
    padding-left:25px;
    padding-right:25px;
    position:relative;
        left:500px;
    color:#499322;
    text-decoration:none;
    background-color:#C0C0C0;
    border-top-left-radius: 10em;
    border-top-right-radius:10em;
    border-bottom-left-radius:10em;
    border-bottom-right-radius:10em;
    height:35px;
    opacity:0.85;
}

.li_secundario{
    display:none;
}