Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 07/11/2019

Menu submenu dropdown horizontal CSS

Neste artigo vou ensinar a criar um menu em HTML5 e CSS3, dropdown na posição horizontal.

CSS:
<style>
*{margin: 0; padding: 0;
}
body{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.div-menu{
border:2px solid #E0FF01;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: #990000;
color: #fff;
font-size: 16px;
}
.menu-1{
list-style:none;
border:0px solid #c0c0c0;
float:left;
}
.menu-1 li{
position:relative;
float:left;
border-right:0px solid #c0c0c0;
padding: 1px 0px;
  }
.menu-1 li a{
color:#333;
text-decoration:none;
padding:5px 10px;
display:block;
color: aliceblue;
}
.menu-1 li a:hover{
background:#FD9698;
color:#fff;
-moz-box-shadow:0 3px 10px 0 #CCC;
-webkit-box-shadow:0 3px 10px 0 #ccc;
text-shadow:0px 0px 5px #fff;
background-color: #D6D6D6;
color: #020EF3;
}
.menu-1 li   ul{
position:absolute;
top:30px; left:0;
background-color:#990000;
display:none;
border:2px solid #E0FF01;
}
.menu-1 li:hover ul, .menu li.over ul{display:block;
}
.menu-1 li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}

</style>

HTML:
<div class="div-menu">
<nav>
  <ul class="menu-1">
<li><a href="#">Home</a></li>
   <li><a href="#">Filmes</a>
         <ul>
                  <li><a href="#">Ação</a></li>
                  <li><a href="#">Drama</a></li>
                  <li><a href="#">Comédia</a></li>
                  <li><a href="#">Nacional</a></li>                  
       </ul>
</li>
<li><a href="#">Lançamentos</a></li>
<li><a href="#">Contato</a></li>                
</ul>
</nav>
</div>


Veja o resultado

Fonte: Luciano

Comente esta matéria:


Compartilhe esta matéria




Veja Também