Menu vertical html e css

Neste tutorial veja como criar um menu vertical com Html e css.

Nesta seção, projetaremos as estruturas com as tags abaixo. 

Usaremos A Tag <div>, <h3>, <i>,<nav>,<ul>,<li> e a tag <a> para inserirmos o LINK de destino.

Essas tags usaremos para criar o nosso Menu vertical com html e css.

Como criar um menu vertical em HTML?

Vamos Adicionar o HTML

<div class="menu">

        <div class="header">
          <h3><i class="icon icon-gauge iconM"></i> Menu</h3>
        </div>

        <nav class="nav">
          
          <ul>

            <li><i class="icon icon-home icon"></i> Home</li>
            <li><i class="icon icon-file-text-o icon"></i> sobre</li>
            
            <li><i class="icon icon-cube icon"></i> Front-end
                
                <ul>
                  
                  <li><i class="icon icon-right-open icon"></i> Códigos Html</li>
                  <li><i class="icon icon-right-open icon"></i> Códigos Css</li>
                  <li><i class="icon icon-right-open icon"></i> Códigos Jquery</li>
                
                </ul>

            </li>

            <li><i class="icon icon-wordpress icon"></i> WordPress</li>
            <li><i class="icon icon-globe icon"></i> Web</li>
            <li><i class="icon icon-mail-3 icon"></i> Contato</li>
          
          </ul>

        </nav>
     
</div><!--menu-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso Menu vertical com css e html.

.menu{

  width: 300px;
  height: auto;
  background-color:transparent;
  border-radius: 10px 10px;
  margin: auto;
  overflow: hidden;


}

.header{
     
  border-radius: 10px 10px 0px 0px;
  padding: 20px 0px;
  background-color: #424242;

}

h3{
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  margin-left: 1rem;
}

.icon-menu{

  font-size: 20px;
  float: left;
  color: #21dee2;

}

.icon{
  margin-right: 8px;
}

.nav li{
  transition: 1s all;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  padding: 15px;
  margin-top: 0px;
  border-bottom: 1px #2b2b2b solid;
  color: #fff;
  background-color: #373737;
  list-style: none;
  display: block;

}

.nav li:last-child { border-bottom:0; }

li:hover{
  
  transition: 0.3s all;
  color: #373737;
  background-color: rgb(33, 214, 218);
  cursor: pointer;

}

.nav > li { float:left; }

.nav li ul{
  
  background: #1E2B32;
  margin-left: 280px;
  margin-top: -38px;
  display: none;
  position: absolute;
  border-top-right-radius: 15px 15px;
  border-bottom-right-radius: 15px 15px;

}

.nav li:hover > ul{
  
  display: block;
  cursor: pointer;

}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando