Dropdown menu in CSS

Asked

Viewed 127 times

0

Good afternoon Galera,

How do I make the dropdown work in the menu I created? Hiding the dropdown from what we did was easy, but how do I make it appear with the mouse over the "what do we do" option? I tried to put an id and property Hover but it didn’t 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 is this way:

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

1 answer

0

Put it on the main line:

li_principal:hover ~ ul { display: block }

Browser other questions tagged

You are not signed in. Login or sign up in order to post.