Muy buenas,
Estoy tratando de hacer un menú horizontal basado en CSS. El menú tiene varias partes:
- Menú principal.
- Algunas opciones con menú secundario.
La idea es que el menú principal tenga pestañitas y el secundario no. Además, tanto el uno como el otro me gustaría que fuesen horizontales, con el menú secundario saliendo justo debajo del principal.
Logros hasta el momento:
- Menú principal horizontal y con pestañitas (qué mono!!)
- Menú secundario sin pestañitas y justo debajo del principal.
Necesito:
- Qué el menú secundario salga también horizontal y llevo varios días sin conseguirlo
En fin aquí os dejo el código del Menú:
Y ahora el de la hoja de estilos (CSS):Código:<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/> <title>Menu</title> <link rel="stylesheet" type="text/css" href="menu.css" /> <script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> </head> <body> <div id="menu"> <ul id="nav"> [*]Inicio <li id="activo">Entrevistas <ul id="subm"> [*]Grupos [*]Actores [*]Otros famosos [/list] [*]Otros articulos [*]Firmas <ul id="subm"> [*]Deivi [*]Tanuka [*]Mareliel [*]Claudia [*]Maryi [*]Jose Ma [/list] [*]Ocio <ul id="subm"> [*]Críticas de cine [*]Chiste del mes [/list] [/list] </div> </body> </html>
A ver si alguien me puede ayudar un poquitoCódigo:#menu { float: left; width: 100% ; text-align: center ; clear: both ; background: #DAE0D2 url("bg.gif") repeat-x bottom; } #menu ul { list-style: none; display: inline; margin: 0; padding: 10px 10px 0; } #menu li { float: left; position: relative; color: #40A035; padding:0 0 0 9px; margin: 0; background: url("left.gif") no-repeat left top; display: block; } #menu #activo { color: #EDFBEB; background-image: url("left_on.gif"); } #menu #activo a { background-image: url("right_on.gif"); padding-bottom: 5px; } #menu #activo li, #menu #activo li a, #menu #subm li, #menu #subm li a { background: #DAE0D2 url("bg.gif") repeat-x bottom; } #menu li ul { /* se ocultan los submenus */ display: block; visibility: hidden; position: absolute; width: auto; top: 1.25em; left: 0; } #menu ul li > #menu ul { top: auto; left: auto; } #menu ul li:hover ul, #menu ul li.over ul { visibility: visible; } /* se hacen visibles los submenus */ #menu #activo ul, #menu li:hover ul { visibility: visible; } /* por defecto se ve el submenu que dependa de la opcion activa */ #menu #activo ul { z-index: 10; } /* el z-index del hover es mayor para poder ver el submenú de otras opciones */ #menu li:hover ul { z-index: 100; } #menu ul li a { float: left; display: block; text-decoration: none; color: #40A035; background: url("right.gif") no-repeat right top; /* el padding para la izquierda es también de 15 (como la dere), pero al haber puesto 9 en el elemento "li" hay que descontarlo aquí */ padding: 5px 15px 4px 6px; font-weight: bold; } #menu a:hover { color: #B73CBB; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } * #menu a { float: none ; } /* End */:D
Citar
Marcadores