Problema con posición de subMenu CSS

[escarba]

Buenas tardes amigos,

Ando desesperado intentando crear mi propio menú horizontal con submenu horizontal tambien.

Ya casi lo tengo, pero el submenú siempre me sale a la izquieda donde comieza el menú en lugar de debajo de su padre.

Aquí os deja la web que estoy preparando. http://devnew.chemagonzalez.es/

Esto me pasa concretamente cuando nos ponemos encima de contacto, que pedido me sale al principio en lugar de debajo.

Este es mi código CSS:

Código:

/* mi menú personalizado */

.nav {
	list-style: none;
	padding: 0;
	width: 100%
	overflow: hidden;
	margin: 0px;	
}

.nav li {
	float: left; 
	margin: 1px 30px 1px 1px;
	list-style:none;
	padding: 5px;
	color:#6d6e71;
	font-size: 20px;	
}

.nav li a {
	color:#6d6e71;
	}
	
.nav li a:hover,
.nav li a.hover {
	color: #21759b;	
}
	
.nav ul li:hover > ul {
	visibility:visible;
	border-top:#CCC 1px solid;	
}
.nav ul ul {
	visibility:hidden;
	position:absolute;
	top:100%;
	left:15px;
	margin-top:35px;
	min-width:10px;
	margin-bottom:5px;
	color:#21759b;
}

.nav ul ul li.hover,
.nav ul ul li:hover {
	border-bottom:#21759b 3px solid;
}
	
.nav ul ul li {	
	min-height:34px;
	height:auto !important;
	margin:0;
	padding:5px 10px;
}

Alguien sabría decirme que me falta??

Muchas gracias!!

[escarba]

También tengo un problema con ese mismo menú en el resto de paginas, ya que el submenú se desplaza hacia abajo y no tengo claro porqué sucede.

Muchas gracias de antemano amigos

[pzin]

Deberías de acompañar el código HTML para ver cómo está estructurado.

Al elemento que contenga el submenú (el elemento padre del selector .nav ul ul) aplícale una posición relativa para que haga de contenedor.

Código CSS:

position: relative;
 

[escarba]

Iniciado por Bonez

Deberías de acompañar el código HTML para ver cómo está estructurado.

Al elemento que contenga el submenú (el elemento padre del selector .nav ul ul) aplícale una posición relativa para que haga de contenedor.

Código CSS:

position: relative;
 

Muchas gracias por tu respuesta.

En primer lugar, no adjunto el HTML ya que es un wordpress y el menú se genera por codigo php...

En segundo lugar si hago lo que me dices. Soluciona el problema pero me causa otro.
Y es, que el menú padre, crea un espacio entre los items del menú padre tan grande como lo que ocupan los items del submenú.

No se si me explico...

Ahora mismo dejé la web para que veas como queda si hago esto.

Muchas gracias

http://devnew.chemagonzalez.es/

[pzin]

No me entendiste, o me expliqué mal.

Para el submenú:

Código CSS:

.nav ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 35px;
  min-width: 10px;
  margin-bottom: 5px;
  color: #21759b;
}
 

Con top y con left a ajustas en qué lugar quieres el submenú. Ponle 10px a uno y 20px a otro para ver lo que pasa.

Y al contenedor de ese submenú, le tienes que aplicar la posición relativa:

Código CSS:

nav li {
  float: left;
  position: relative;
  margin: 1px 30px 1px 1px;
  list-style: none;
  padding: 5px;
  color: #6d6e71;
  font-size: 20px;
}
 

La posición relativa hará que los elementos internos tomen a este como referencia de contenedor. Los atrapa por decirlo de alguna forma más gráfica.

[escarba]

Iniciado por Bonez

No me entendiste, o me expliqué mal.

Para el submenú:

Código CSS:

.nav ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 35px;
  min-width: 10px;
  margin-bottom: 5px;
  color: #21759b;
}
 

Con top y con left a ajustas en qué lugar quieres el submenú. Ponle 10px a uno y 20px a otro para ver lo que pasa.

Y al contenedor de ese submenú, le tienes que aplicar la posición relativa:

Código CSS:

nav li {
  float: left;
  position: relative;
  margin: 1px 30px 1px 1px;
  list-style: none;
  padding: 5px;
  color: #6d6e71;
  font-size: 20px;
}
 

La posición relativa hará que los elementos internos tomen a este como referencia de contenedor. Los atrapa por decirlo de alguna forma más gráfica.

Bien, el problema ahora, es que al poner la posición relativa, el submenú se pone vertical, y necesito que sea horizontal...creo que está cerca la solución!!

Infinitas gracias por las respuestas!

[escarba]

Recapitulando.

Ahora mismo, el problema es que el submenú aparece vertical y necesito que sea horizontal.

Este es el CSS ahora mismo.

Código CSS:

/* mi menú personalizado */
 
.nav {
    list-style: none;
    padding: 0;
    width: 100%
    overflow: hidden;
    margin: 0px;    
}
 
.nav li {
    float: left;
  position: relative;
  margin: 1px 30px 1px 1px;
  list-style: none;
  padding: 5px;
  color: #6d6e71;
  font-size: 20px;
    
}
 
.nav li li{
    float: right;
    
    
    }
 
.nav li a {
    color:#6d6e71;
    }
    
.nav li a:hover,
.nav li a.hover {
    color: #21759b; 
}
    
.nav ul {
    position: relative;
}
.nav ul li:hover > ul {
    visibility:visible;
    border-top:#CCC 1px solid;  
}
.nav ul ul {
  visibility: hidden;
  position: absolute;
  top: 35px;
  left: 0px;
  min-width: 10px;
  margin-bottom: 5px;
  color: #21759b;
}
 
.nav ul ul li.hover,
.nav ul ul li:hover {
    border-bottom:#21759b 3px solid;
    
}
    
.nav ul ul li { 
    min-height:34px;
    height:auto !important;
    margin:0;
    padding:5px 10px;
}
 

Muchas gracias!!

[pzin]

Échale un ojo al capitulo de posicionamiento del tutorial CSS de librosweb.es.

[rikype]

Buenas!

Haciendo los siguientes cambios en tu hoja de estilos a mí ya me saldría en horizontal el submenu:

Código CSS:

.nav ul ul {
    width: 520px;
}
 
.nav ul ul li {
     float:left;
}
 

Poniendo un tamaño "width" fijo al submenú ya saldría en horizontal, con los "padding" que tienes puesto creo que sobre 520px es el mínimo que puedes poner en ese "width".

El único problema que me "salta" al ponerlo así es que justo cuando vas a cualquiera de las opciones del submenú me sale el scroll vertical, pero imagino que eso lo podrás solucionar fácilmente.

Saludos!