Foros del Web » Creando para Internet » CSS »

Menu desplegable y en dos filas

Estas en el tema de Menu desplegable y en dos filas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/11/2008, 15:29
 
Fecha de Ingreso: marzo-2007
Ubicación: España
Mensajes: 133
Antigüedad: 10 años, 9 meses
Puntos: 0
Menu desplegable y en dos filas

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??
  #2 (permalink)  
Antiguo 04/11/2008, 15:34
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Menu desplegable y en dos filas

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?
__________________
Curso de SEO y HTML.
Diprox.com.ar // Diseño Web.
Mi twitter: @soydacho
  #3 (permalink)  
Antiguo 04/11/2008, 16:12
 
Fecha de Ingreso: marzo-2007
Ubicación: España
Mensajes: 133
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable y en dos filas

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
  #4 (permalink)  
Antiguo 04/11/2008, 18:38
Avatar de pulidoman  
Fecha de Ingreso: noviembre-2008
Mensajes: 3
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable y en dos filas

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
  #5 (permalink)  
Antiguo 06/11/2008, 02:03
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Menu desplegable y en dos filas

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!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:18.