Menu simples feito com html e css

Menu simples feito com html e css

Hoje veremos como criar um menu simples feito com html e css.

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

Usaremos duas classes (.menu e .item) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso menu html simples.

Vamos Adicionar o HTML

    <ul class="menu">
    
        <li class="item"><a href="#" title="Home">Home</a></li>
        <li class="item"><a href="#" title="Html">Html</a></li>
        <li class="item"><a href="#" title="Css">Css</a></li>
        <li class="item"><a href="#" title="Jquery">Jquery</a></li>
    
    </ul>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso Menu.

.menu{

  font-family: 'open_sansregular';
  border-radius: 6px;
  padding: 10px;
  background-color: #0b4c9f;

}

.menu .item{

    display: block;
    list-style: none;
    margin: 0 15px 0;
    padding: 10px 0;
    border-bottom: 1px #2e66af solid;

}

.menu .item:last-child {

    border-bottom:0;

}

.item a{

  font-size: 1em;
  color: #ffffff;
  text-decoration: none;

}

.item a:hover{
 
  color: #ffef00;

}

/*768PX BREAKPOINT*/
@media (min-width:48em){

   .menu { padding: 15px; } 
   .menu .item {

        display: inline;
        padding: 10px 0;
        border-bottom: 0;

    }

} 

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando