Despliegue menu html+css

-

-EXE- #1 Feb '17

Buenas, tengo un menú horizontal de tres niveles, el cual quiero que una vez vaya a abrir el tercer nivel, este no se despliegue hacia la derecha, sino que se despliegue verticalmente, como si fuera un móvil.

Tengo éste código:

HTML

						<nav>
				<ul id="menu">
				<br/>
				  <li><a href="#">1</a></li>
				  <li><a href="#">1</a>
					<ul>
					  <li><a href="#">2</a></li>
					  <li><a href="#">2</a></li>
					  <li><a href="#">2</a> <---- De este 2 se tiene que desplegar horizontalmente los dos 3 que hay acontinuación
					  <ul>
						  <li><a href="#"> 3</a></li>
						  <li><a href="#"> 3</a></li>
						  </ul> 
					  </li>
						  

				  <li><a href="#">2</a></li>
						
				</ul>  
			  </li>
			  <li><a href="#">1</a></li>
			  <li><a href="#">1</a></li>
			</ul>
		  </nav>

CSS

header{
  font-family: Helvetica;
  width: 480px;
  margin: 0 auto;
}

ul
{
  list-style: none;
}



nav
{
	font-family: sans-serif;
	background-color: grey;
	position: fixed;
	left: 10px;
	width: 100px;
	margin: 0 auto;
	top: 15%;
}

header{
  font-family: Helvetica;
  width: 480px;
  margin: 0 auto;
}

ul
{
  list-style: none;
}
#menu li>a{
  background-color: grey;
  color: white;
  padding: 20px;
  display: block;
  text-decoration: none;
  min-width: 100px;
}
#menu li>a:hover
{
  color: #000;
  background-color: #eaeaea;
}
#menu>li
{
  float: left;
  text-align:center;
}

#menu>li>ul
{
  display: none;
  

}
#menu>li:hover>ul 
{
  display:block;
}

Llevo rato probando cosas pero no encuentro la manera de hacerlo, alguien ve dónde está el error?

Como probablemente no se me entienda, os lo he hecho así a lo cutre con el paint lo que quiero hacer.

Saludos y gracias de antemano.

-xH #2 Feb '17

#1 Esto te servirá, adapta tu código y ya esta:

http://codepen.io/wanni/pen/zsDJb

2 2 respuestas

-

-EXE- #3 Feb '17

#2 muchas gracias, es exactamente lo que buscaba, voy a ver si puedo adaptarlo

Lo he vuelto a mirar, y ha desaparecido el código de esa web :S

1 respuesta

eXtreM3 #4 Feb '17

#3 no ha desaparecido, es que únicamente es html y css, nada de js.

Vamos, el "truco" es añadir los elementos ocultos dentro del elemento li. En ese caso mete otro ul con la clase submenu. Entonces al hacer hover en el li, le aplica esta propiedad

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

Y el submenú aparece.

pd: el submenu por defecto está oculto:

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

Saludosss

1 1 respuesta

-

-EXE- #5 Feb '17

#4 el código que puso #2 es lo que buscaba (la forma del despliegue), el problema es que está en vertical y lo quiero en horizontal, y no sé cómo cambiarlo :S.

En el código que puse en #1 lo tengo ya en horizontal, solo que cuando despliego el menú sale todo directamente, se debería de ocultar el tercer nivel, es decir, lo tengo como en la foto de #1 ahora mismo, quiero ver la forma de ocultar los dos números 3 que hay.

1 respuesta

eXtreM3 #6 Feb '17

#5 para alinear los li tienes que ponerle el estilo