Como criar um menu suspenso

Como criar um menu suspenso

Neste tutorial veja como criar um menu suspenso com html e css.

Nesta seção, projetaremos uma estrutura simples na tag <nav>, <h1>, <ul>, <li> e a <href> para inserir link de destino. 

Essas são as tags que usaremos para criar o nosso menu suspenso com html e css.

Vamos Adicionar o HTML

    <nav class="dropdown">
                      
      <h1><i class="icon icon-menu"></i> Menu </h1>
                      
      <ul>
         <li><a href="#">Html5</a></li>
         <li><a href="#">Css3</a></li>
         <li><a href="#">Jquery</a></li>
         <li><a href="#">WordPress</a></li>
      </ul>

    </nav><!--dropdown-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso menu suspenso com html e css.

.dropdown {

  margin: 0px auto;
  width: 300px;

}

.dropdown:hover h1 {

  border-radius: 5px 5px 0px 0px;

}

.dropdown:hover li {

    padding: 8px 15px;
    border-top: 1px #005cd1 solid;
    height: auto;
    overflow: auto;
    opacity: 1;

}

.dropdown h1 {

    display: inline-block;
    padding: 8px 15px;
    position: relative;
    background: #0070ff;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    border: 5px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    transition: all 0.5s linear 0s;

}

.dropdown h1 b {

  color: #EEE;
  font-weight: normal;

}


.dropdown ul {

  width: 300px;  
  display: block;
  position: absolute;
  list-style: none;

}


.dropdown li {

  padding: 0px 10px;
  background: #0070ff;
  color: #ffffff;
  text-align: left;
  border: 0px;
  width: 100%;
  height: 0px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition-property: all, background-color;
  transition-duration: 0.2s, 0.4s;

}

.dropdown li a { text-decoration:none; color:#fff; }

.dropdown li:hover,
.dropdown li.selected {

  background-color: #005fd9;

}

.dropdown li:last-child {

  border-radius: 0px 0px 5px 5px;

}


.dropdown li:nth-child(1) {

  transition-delay: 0s, 0s;

}

.dropdown li:nth-child(2) {

  transition-delay: 0.1s, 0s;

}

.dropdown li:nth-child(3) {

  transition-delay: 0.2s, 0s;

}

.dropdown li:nth-child(4) {

  transition-delay: 0.3s, 0s;

}

.dropdown li:nth-child(5) {

  transition-delay: 0.4s, 0s;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando