Menu Responsivo Branco e Azul

Neste artigo vamos fazer um Menu Responsivo Branco e Azul com html e css.

Vamos Adicionar o Html:

<nav class="menu-horizontal">

    <ul>

        <li><a href="#" class="lineTop"> <span> Html </span> </a></li>
        <li><a href="#" class="lineTop"> <span> Css </span></a></li>
        <li><a href="#" class="lineTop"> <span> Jquery </span></a></li>
        <li><a href="#" class="lineTop"> <span> WordPress </span></a></li>

        <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-facebook"></i> <span class="textRs"> Facebook</span></a></li>
        <li class="right"><a href="3" target="_blank" class="lineTop social"> <i class="icon icon-instagram"></i> <span class="textRs"> Instagram</span></a></li>                        
        <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-twitter"></i> <span class="textRs"> Twitter</span></a></li>
        <li class="right"><a href="#" target="_blank" class="lineTop social"> <i class="icon icon-pinterest"></i><span class="textRs"> Pinterest</span></a></li>

    </ul>

</nav>

Vamos Adicionar o Css:

.menu-horizontal { 

    margin:auto; 
    float:left; 
    width:100%; 
    background-color:transparent; 
    border-radius:5px; 
    overflow:hidden;
    border-top: 2px #04b7fd solid;
    border-left: 1px #eaeaea solid;
    border-right: 1px #eaeaea solid;
    border-bottom: 1px #eaeaea solid;

    box-shadow: -1px 11px 6px -10px rgba(0,0,0,0.42);
    -webkit-box-shadow: -1px 11px 6px -10px rgba(0,0,0,0.42);
    -moz-box-shadow: -1px 11px 6px -10px rgba(0,0,0,0.42);

}

ul,li {
  
  margin: 0;
  padding: 0;
  list-style: none;

}

li {
  
  position: relative;
  float: left;
  width:100%;
  display: block;
  overflow:hidden!important;
  border-bottom:1px #eaeaea solid;

}

li.right { float:right; }

li.right i{ 
     
    z-index:2;
    position:relative; 
    color:#04b7fd;
    transition: 0.3s;

}

li:hover i{ 
      
    color:#ffffff;
}

.lineTop span { 

    z-index:2; 
    position:relative; 
    color:#04b7fd;
    transition: 0.3s;
 
}

li:hover span{ 

    color:#ffffff; 
    transition: 0.3s;

}


.lineTop {

  display: block;
  padding: 0 30px;
  line-height: 50px;
  text-decoration: none;
  z-index:2;

}

.lineTop.social {

  display: block;
  padding: 0 15px;
  line-height: 50px;
  text-decoration: none;
  color:#1abdfd;

}

.lineTop:after {

    content: '';
    position: absolute;
    top:0;
    left:0;
    display: block;
    height:100%;
    width:0;
    text-align: center;
    background-color: #04b7fd;
    transition: 0.3s;

}


li:hover .lineTop:after {

  width:100%;
  background-color:#04b7fd; 

}

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

/*Menu*/
.menu-horizontal { 

    background: rgb(238,238,238);
    background: linear-gradient(0deg, rgba(238,238,238,1) 7%, rgba(255,255,255,1) 50%);

}


li { width:auto; border-bottom:none; }
li.right .textRs { display:none; }

.lineTop:after {

    content: '';
    position: absolute;
    top:0;
    left:0;
    display: block;
    height:0;
    width:100%;
    text-align: center;
    background-color: #04b7fd;
    transition: 0.3s;

}


li:hover .lineTop:after {

  height:100%;
  background-color:#04b7fd; 

}
/*Menu*/

} 

Veja o Resultado !

Baixar Código Veja Funcionando