MENU DESPEGABLE
FORMULARIO DE HTML
RECUERDE HACER UNA CARPETA DE CSS
<html lang="en">
<head>
<title>menu</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="inicio.html">INICIO</a>
<ul>
<li><a href="1.html">submenu1</a></li>
<li><a href="2.html">submenu2</a></li>
<li><a href="3.html">submenu3</a></li>
</ul>
</li>
<li><a href="inicio.html">MISIÓN</a>
<ul>
<li><a href="4.html">submenu1</a></li>
<li><a href="5.html">submenu2</a></li>
<li><a href="6.html">submenu3</a></li>
</ul>
</li>
<li><a href="inicio.html">VISIÓN</a></li>
<li><a href="inicio.html">PRODUCTOS</a></li>
</ul>
</nav>
</body>
______________________________________
MENU ESTILOS EN CSS
*{
margin:0px;/* margen general de la hoja*/
padding:0px;
}
ul{
list-style:none;/*quitamos la decoración*/
}
nav{ /*agregamos color de relleno*/
background-color:#000;
padding:30px; /*tamaño del nav*/
}
.menu{
margin:auto; /*centramos el menu*/
width:500px;/* le damos acho*/
margin-top:-20px;/* margen de arriba para bajo*/
}
.menu li a{
background-color:#000;
color:#fff;
text-decoration:none;
display:block; /* hacemos un bloque*/
padding:10px 15px;/* alto y acho*/
}
.menu > li{ /* etiquetas principales a la derecha*/
float:left;
}
.menu li a:hover{
background-color:#434343;
}
.menu li ul{ /* submenu */
position:absolute;
min-width:110px;
display:none;
}
.menu li:hover>ul{
display:block; /* los submenu aparescan*/
}
RECUERDE HACER UNA CARPETA DE CSS
<html lang="en">
<head>
<title>menu</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="inicio.html">INICIO</a>
<ul>
<li><a href="1.html">submenu1</a></li>
<li><a href="2.html">submenu2</a></li>
<li><a href="3.html">submenu3</a></li>
</ul>
</li>
<li><a href="inicio.html">MISIÓN</a>
<ul>
<li><a href="4.html">submenu1</a></li>
<li><a href="5.html">submenu2</a></li>
<li><a href="6.html">submenu3</a></li>
</ul>
</li>
<li><a href="inicio.html">VISIÓN</a></li>
<li><a href="inicio.html">PRODUCTOS</a></li>
</ul>
</nav>
</body>
______________________________________
MENU ESTILOS EN CSS
*{
margin:0px;/* margen general de la hoja*/
padding:0px;
}
ul{
list-style:none;/*quitamos la decoración*/
}
nav{ /*agregamos color de relleno*/
background-color:#000;
padding:30px; /*tamaño del nav*/
}
.menu{
margin:auto; /*centramos el menu*/
width:500px;/* le damos acho*/
margin-top:-20px;/* margen de arriba para bajo*/
}
.menu li a{
background-color:#000;
color:#fff;
text-decoration:none;
display:block; /* hacemos un bloque*/
padding:10px 15px;/* alto y acho*/
}
.menu > li{ /* etiquetas principales a la derecha*/
float:left;
}
.menu li a:hover{
background-color:#434343;
}
.menu li ul{ /* submenu */
position:absolute;
min-width:110px;
display:none;
}
.menu li:hover>ul{
display:block; /* los submenu aparescan*/
}
Comentarios
Publicar un comentario