Cómo agregar submenús a un nav usando CSS

jclaurian · 5 Dic 2013

Hola, tengo un nav y estoy tratando de agregar submenús en una opción. E visto varios ejemplos de Internet pero ninguno me funciona. Y es que desde el inicio mi nav es diferente a los ejemplos (el código) y no puedo acomodarlo para que funcione. Les pongo mi código.

HTML

Insertar CODE, HTML o PHP:

<div id="nav">
			<ul>
				<li id="menu"><a href="#">Principal</a></li>
				<li id="menu"><a href="#">¿Quiénes somos?</a></li>
				<li id="menu"><a href="#">Conoce nuestros servicios</a></li>
					<ul>
						<li id="menu2">Servicio 1</li>
						<li id="menu2">Servicio 2</li>
					</ul>	
				<li id="menu"><a href="#">Únete a nosotros</a></li>
				<li id="menu"><a href="#">Contacto</a></li>
			</ul>
		</div>

CSS

Insertar CODE, HTML o PHP:

ul{
    display: inline;
    list-style: none;
    padding: 0;
}

li {
	display: inline;
}

#nav {
	background-color: #025fc7;
	margin-bottom: 20px;
	padding: 10px;
}

#nav a {
	color: #fff;
	padding: 0.2em;
	text-decoration: none;
}

#nav a:hover {
	color: #333;
}

#menu {
	background-color: #025fc7;
	margin: 0px;
	padding: 10px;
}

#menu:hover {
	background-color: #d0d0d0;
}

Cuando hago: ul ul { display: none; } oculto el submenú, pero ya no encuentro como mostrarlo de nuevo, ul ul:hover no me funciona, ya e probado otras opciones y nada.

Ojala me puedan ayudar.

balfer · 6 Dic 2013

Hola, para comenzar, tienes un fallo en tu HTML, que debería ser:

HTML:

<div id="nav">
   <ul>
      <li id="menu"><a href="#">Principal</a></li>
      <li id="menu"><a href="#">¿Quiénes somos?</a></li>
      <li id="menu"><a href="#">Conoce nuestros servicios</a>
         <ul>
            <li id="menu2">Servicio 1</li>
            <li id="menu2">Servicio 2</li>
         </ul></li>
      <li id="menu"><a href="#">Únete a nosotros</a></li>
      <li id="menu"><a href="#">Contacto</a></li>
   </ul>
</div>

Porque entiendo que quieres que se despliegue cuando coloques el ratón justo encima del menú "Conoce nuestros servicios".

Ahora lo primero será ocultar el menú de segundo nivel (Servicio 1 y Servicio 2), para ello hacemos lo siguiente:

Insertar CODE, HTML o PHP:

#nav ul li ul {display:none;}

Y, para que al hace hover (pasar el ratón por encima del elemento del menú) se muestre, hacemos lo siguiente:

Insertar CODE, HTML o PHP:

#nav ul li:hover ul {display:block;}

A partir de ahí, faltaría darle la apariencia que quieras a tu menú.

Me suscribo al tema, si tienes algún problema más dímelo. ;-D

Cómo agregar submenús a un nav usando CSS

jclaurian Seguir

balfer