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 :twisted: :twisted: :twisted:
En fin aquí os dejo el código del Menú:
Y ahora el de la hoja de estilos (CSS):
A ver si alguien me puede ayudar un poquito :cry: :D
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 :twisted: :twisted: :twisted:
En fin aquí os dejo el código del Menú:
<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">
[*][url="nuevo.html"]Inicio[/url]
<li id="activo">[url="#"]Entrevistas[/url]
<ul id="subm">
[*][url="#"]Grupos[/url]
[*][url="#"]Actores[/url]
[*][url="#"]Otros famosos[/url]
[/list]
[*][url="#"]Otros articulos[/url]
[*][url="#"]Firmas[/url]
<ul id="subm">
[*][url="#"]Deivi[/url]
[*][url="#"]Tanuka[/url]
[*][url="#"]Mareliel[/url]
[*][url="#"]Claudia[/url]
[*][url="#"]Maryi[/url]
[*][url="#"]Jose Ma[/url]
[/list]
[*][url="#"]Ocio[/url]
<ul id="subm">
[*][url="#"]Críticas de cine[/url]
[*][url="#"]Chiste del mes[/url]
[/list]
[/list]
</div>
</body>
</html>Y ahora el de la hoja de estilos (CSS):
#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 */A ver si alguien me puede ayudar un poquito :cry: :D