MENU CSS CON IMAGEN
/*****************************************************************************************/<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>
<header>
<nav id="nav-estilo">
<ul class="menu">
<li><a href="index.html" id="home-current">HOME</a></li>
<li><a href="index.html">SERVICIOS</a>
<ul>
<li><a href="index.html">DESARROLLO WEB</a></li>
<li><a href="index.html">DESARROLLO ESCRITORIO</a></li>
<li><a href="index.html">SOPORTE TECNICO</a></li>
</ul></li>
<li><a href="index.html">TRABAJOS</a></li>
<li><a href="index.html">CONTACTOS</a></li>
</ul>
</nav>
</header>
</body>
</html>
Imagen de fondo Imagen sobre el menu
Estilo-CSS3 del Menu
.menu {
background:url(../img/backgroundfill.gif) repeat-x;
font-family:Calibri;
font-size:0.6em;
font-weight:bold;
height: 6em;
margin: 0 auto; /*Remueve el margen y centra el menu*/
padding: 0; /*Quita espacio al incio del menu*/
width: 40%; /*Define la longitud total de menu*/
}
.menu a{
color:#004A8E;
margin: 0em -0.1em 0em 0em;
padding: 1.6em 2.5em 1.6em 2.5em; /*arriba, derecha, abajo, izquierda*/
text-align: center;
text-decoration:none; /*Remueve el subrayado del texto <a>*/
}
.menu a,li{display: inline-block; /*Dispone el menu en line*/
}
.menu a:hover, .menu #home-current{
color:#fff;
background:transparent url(../img/backgroundover.gif) no-repeat top center;
}
/**************************************************************************/
MENU CSS DESPLEGABLE
No hay comentarios.:
Publicar un comentario