Menu desplegable y en dos filas

[Elisa85]

Hola
Estoy intentando crear un menú horizontal en css. Este consta de 12 opciones, algunas de las cuales tienen opciones por debajo que se despliegan al pasar el ratón por encima. El caso es que si el menú lo quisiera disponer en una sola fila no tendría problema (esto lo tengo hecho) pero quiero dividirlo en dos filas para que no quede un menú tan largo. He probando poniendo 6 y 6 como si fueran menús independientes pero al desplegar una opción de la fila de arriba, no se ven todas las sub-opciones porque el menú de la segunda fila está por encima...

Se os ocurre como solucionarlo??

[dacho]

Hola Elisa85... Eso dependeria de como esta hecho el codigo. Si utilizas posiciones absolutas entonces tienes que darle mayor z-index a las cosas que quieres que esten encima de otras.

Pero eso son solo suposiciones, porque no compartes el codigo a ver como lo solucionamos entre todos?

[Elisa85]

Este es el código que utilizo:

Código HTML:

ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
  /*border: 1px solid #FFF;*/
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #dadee7;
  color: #395E93; /*color de las letras sin desplegar*/
  font: bold 14px/22px Comic Sans, Comic Sans MS, cursive;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #395E93;
  color: #DADEE7;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #dadee7;
  color: #395E93;
}

/* 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: #385E93;
  color: #dadee7;
}


ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
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;
}

y asi hago en el menú:

Código HTML:

<ul id="navmenu-h">
        <li><a href="#"><img src="/HPR/pua.JPG" border="0">Radio</img></a></li>
			  <ul>
            	<li><a href="#">Escúchanos</a></li>
			   	<li><a href="#">Horario</a></li>
			    <li><a href="#">Programas</a></li>
			    <li><a href="#">Peticiones</a></li>
			  </ul>		
	          <li><a href="#">Noticias</a></li>
		<li><a href="#">Reportajes</a>
			  <ul>
            	<li><a href="#">Críticas</a></li>
			   	<li><a href="#">Entrevistas</a></li>
			    <li><a href="#">Reportajes</a></li>
			    <li><a href="#">Especiales</a></li>
			  </ul>		
	    </li>	
		<li><a href="#">Concursos</a></li>
		<li><a href="#">Colabora</a></li>
		<li><a href="#">Contacta</a>
			  <ul>
            	<li><a href="#">E-mail</a></li>
			   	<li><a href="#">Historia</a></li>
			  </ul>		
	    </li>	
		
    </ul>
	
	<ul id="navmenu-h">
        
	  <li><a href="*">Televisión</a></li>
		  <ul>
            	  <li><a href="#">TV</a></li>
			   	  <li><a href="#">Peticiones</a></li>
		      </ul>
	  
		<li><a href="#">Conciertos</a></li>
		<li><a href="#">Enlaces</a></li>	
		<li><a href="#">Foro</a></li>
		<li><a href="#">Tienda</a></li>
		<li><a href="#">MySpace</a></li>	
    </ul> 

gracias

[pulidoman]

Hola Elisa,

Sería muy bueno que el menú desplegable pase por arriba del otro menú que se encuentra abajo, pero creo más conveniente y estético que pusieras los menús que tienen opciones desplegables abajo, y dejaras los otros arriba.

Veo que los menús de la fila de abajo no tienen sub-menús, entonces si lo haces de esa forma no tendrías ningún problema creo yo.

Saludos =)

Luis Pulido
luispulido.blogspot.com

[Aresillo]

Por qué no lo pones todo en una fila? Sólo s por curiosidad, supongo que es porque te tienes que ceñir a ese espacio...
De todas formas yo haría una distinción entre colores del menú y el submenú...ahora parece un poco lío...

Aresillo!!