0
Hola gente les traigo un menu muy simple espero les guste
Codigo Css
Código:
.menu-v1{
background-color: #333333;
border-top: 3px solid red;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
position: relative;
margin: 0;
padding: 0;
width: 536px; /* ANCHURA MENU*/
height: 60px; /* ALTURA MENU*/
}
.menu-v1 ul{
margin:0;
padding: 0;
list-style: none;
}
.menu-v1 ul > li{
position: relative;
display: block;
float: left;
font-family: Century Gothic;
font-size: 12px;
}
.menu-v1 li > a{
display: block;
color: #FAFAFA;
text-shadow: 0 0 12px #222222, 0 -1px 0 #000000;
text-decoration: none;
height: 18px;
padding: 21px 30px;
border-right: 1px solid #000;
border-left: 1px solid #494949;
}
.menu-v1 li:first-child a{
border-left: none;
}
.menu-v1 li:last-child a{
border-right: none;
}
.menu-v1 li > a:hover{
background-color: rgba(126, 126, 128, 0.31);
}
Codigo Html
Código:
<div class="menu-v1">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Historial</a></li>
<li><a href="">Contacto</a></li>
<li><a href="">Soporte</a></li>
<li><a href="">Apoya</a></li>
</ul>
</div>
DEMO
I PROGRMAER