![Antiguo](http://static.forosdelweb.com/fdwtheme/images/statusicon/post_old.gif)
11/12/2009, 08:48
|
![Avatar de AhmedRugama](http://static.forosdelweb.com/customavatars/avatar279316_1.gif) | | | Fecha de Ingreso: diciembre-2008 Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 16 años, 1 mes Puntos: 6 | |
Respuesta: Creacion de un menu para web tipo "Sprite" desplegable Hola, prueva este, puedes ir agregando submenus, creando una lista <ul> dentro de un elemento <li>:
HTML:
Código:
<div id="menu">
<div class="container850">
<ul id="navmenu-h">
<li><a href="index.php">Inicio</a></li>
<li><a href="nosotros.php">¿Quiénes Somos? +</a>
<ul>
<li><a href="nosotros/submenu1.php">Submenu1</a></li>
</ul>
</li>
<li><a href="servicios.php">Nuestros Servicios +</a></li>
</ul>
</div>
</div>
CSS:
Código:
#menu{
width:100%;
border-bottom: solid 4px #b2daf7;
height:44px;
}
.container850{
width:850px;
margin:auto;
}
ul#navmenu-h { margin: 0 0 0 20px; padding: 0; list-style: none; position: relative;}
ul#navmenu-h ul {
width: 190px; /* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
ul#navmenu-h li { float: left; display: inline; position: relative;}
ul#navmenu-h ul li { width: 100%; display: block;}
/* Root Menu */
ul#navmenu-h a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left;
display: block;
background: #d5ecfb;
color: #69c;
font: bold 0.76em Arial, sans-serif;
text-decoration: none;
height: 1%;
}
ul#navmenu-h > li a {
padding: 13px 22px;
}
ul#navmenu-h ul a {
padding: 6px 10px;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #69c;
color: #FFF;
}
ul#navmenu-h .selected{
background:#b3dbf5;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: #69c;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #039;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}
/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
|