Boa tarde Pessoal, estou com duas dificuldades neste meu código...
A primeira, fazer com que o o li_secundario apareça apenas no hover, eu tentei colocar li_secundario:hover{ display:block} mas não funcionou... e o segundo problema é que na li_secundario eles também estão aparecendo lado a lado, e não um item abaixo do outro...
<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>
.main_menu{
float:left;
position:relative;
top:-10px;
height:40px;
width:100%;
z-index:-4;
}
.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{
position:absolute;
top:35.5px;
left:890px;
font-size:25px;
color:#499322;
font-family:"Verdana";
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:30px;
opacity:0.85;
}