Agregar submenu

[antuanbl]

Buenas a todos, quiero agregar un submenu y me estoy volviendo loco

El menú actual es

Home______Home
Home2

y quiero meter otro submenu en home2 quedando así

Home______Home Home2____
Home3
Home4

Lo he intentado de mil formas pero o se me descoloca todo, o pasando sobre home2 no se despliega nada.

Pongo el código por si alguien me puede ayudar. Muchas gracias de antemano

Código HTML:

<nav class="navbar" role="navigation">
		 <div class="container">
			 <div class="navbar-header">
				 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
					 <span class="sr-only">Toggle navigation</span>
					 <span class="icon-bar"></span>
					 <span class="icon-bar"></span>
					 <span class="icon-bar"></span>
				   </button>
				   <a class="navbar-brand" href="index.html">PAGINA</a>
			   </div>
			   <!-- Collect the nav links, forms, and other content for toggling -->
			   <div class="collapse navbar-collapse" id="top-navbar-1">
				   <ul class="nav navbar-nav navbar-right">
					   <li class="dropdown active">
						   <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">
							   <i class="fa fa-home"></i><br>Home <span class="caret"></span>
						   </a>
						   <ul class="dropdown-menu dropdown-menu-left" role="menu">
							   <li class="active"><a href="index.html">Home</a></li>
							   <li><a href="index-2.html">Home 2</a></li>
						   </ul>
					   </li>
					   <li>
						   <a href="portfolio.html"><i class="fa fa-camera"></i><br>Portfolio</a>
					   </li>
					   <li>
						   <a href="#"><i class="fa fa-comments"></i><br>Blog</a>
					   </li>
					   <li>
						   <a href="services.html"><i class="fa fa-tasks"></i><br>Services</a>
					   </li>
					   <li>
						   <a href="about.html"><i class="fa fa-user"></i><br>About</a>
					   </li>
					   <li>
						   <a href="contact.html"><i class="fa fa-envelope"></i><br>Contact</a>
					   </li>
				   </ul>
			   </div>
		   </div>
	   </nav> 

[fede5426]

Agregando otra lista dentro de la etiqueta "<li></li>" de Home2..

http://codepen.io/anon/pen/LEmEvq

Fijate si era eso lo que necesitabas.. es lo que yo entendi :P

[antuanbl]

Hola Fede5426, antes de nada agradecerte la respuesta. El caso que me comentas ya lo he probado y si me saca los menus pero no cuando pasa el ratón por encima, me los abre directamente debajo como en esta imagen que pongo.



Tampoco muestra SUBMENU1

La idea es que al pasar encima de productos se de despliegue TODOS LOS PRODUCTOS , EXTERIOR,INTERIOR etcc y al pasar por encima de todos los productos se desplieguen los dos submenus

[fede5426]

Lo podes hacer con JQuery..

Quedaría algo asi:

http://codepen.io/anon/pen/qEYdKB

Fijate si te sirve.. los estilos se los acomodas como a vos te guste. Lo que interesa es el código JQuery, aplicalo a tu menú.

Para que los submenus aparezcan a la misma altura que el resto de los items, cambia su posición de absolute a relative y hay que quitarle el "left".. quedaria asi:

http://codepen.io/anon/pen/xbjGQK

[antuanbl]

Gracias por la ayuda, te envié un MP porque no consigo adaptarlo

[pzin]

¿Estás usando Bootstrap? Si es así, échale un vistazo a la documentación de Bootstrap, que viene todo explicado.

[antuanbl]

Hola si, estoy modificando una pantilla hecha con bootstrap, le he dado mil vueltas y no he sido capaz :(