Problema con Dropdown multinivel Bootstrap 3

[miguelangel23]

Hola a todos, espero que se encuentren muy bien. Quisiera comentarles mi situación. Estoy utilizando el framework Bootstrap, en su versión 3 para realizar un sitio web. En estos momentos estoy realizando una barra de navegación multinivel y el problema que tengo es que cuando paso el mouse sobre la opción "Huanchaco" me despliega dos cuadros de opciones, en vez de desplegarme sólo uno (la sgte imagen muestra lo dicho)



Las opciones que deberían mostrarme cuando paso el mouse por la opción "Huanchaco" son: Información, Ubicación, Deportes, Celebraciones, Galería. Las otras opciones de menú (Historia, Ubicación, Clima, Temporadas, Servicios) deberían aparecer cuando yo paso el mouse por la opción "Información"

Lo raro es que cuando paso el mouse sobre la opción "Alojamiento", esta si funciona correctamente (me muestra las opciones necesarias)

La imagen que adjunto muestro lo dicho:



¿Qué podría estar pasando? Adjunto el código html:

Código HTML:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" style=" color: #fff;">HUANCHACO</b></a>
                  <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu" style=" margin-top: -1px;">
                    <!--<li><a href="#" style=" color: #fff;">Informaci&oacute;n</a></li>-->
                    <li class="dropdown-submenu"><a tabindex="-1" href="#" style=" color: #fff;">Informaci&oacute;n</a>
                      <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="#" style=" color: #fff;">Historia</a></li>
                        <li><a href="#" style=" color: #fff;">Ubicaci&oacute;n</a></li>
                        <li><a href="#" style=" color: #fff;">Clima</a></li>
                        <li><a href="#" style=" color: #fff;">Temporadas</a></li>
                        <li><a href="#" style=" color: #fff;">Servicios</a></li>
                      </ul>
                    </li>
                    <li><a href="#" style=" color: #fff;">Ubicaci&oacute;n</a></li>
                    <li><a href="#" style=" color: #fff;">Deportes</a></li>
                    <li><a href="#" style=" color: #fff;">Celebraciones</a></li>
                    <li><a href="#" style=" color: #fff;">Galer&iacute;a</a></li>
                  </ul>
                
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" style=" color: #fff;">ALOJAMIENTO</a>
                  <ul class="dropdown-menu" style=" margin-top: -1px;" >
                        <li><a href="#" style=" color: #fff;">Hoteles</a></li>
                        <li><a href="#" style=" color: #fff;">Hostales</a></li>
                        <li><a href="#" style=" color: #fff;">Hospedajes</a></li>
                        <li><a href="#" style=" color: #fff;">Casas de alquiler</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" style=" color: #fff;">GASTRONOM&Iacute;A</a>
                  <ul class="dropdown-menu" style=" margin-top: -1px;">
                        <li><a href="#" style=" color: #fff;">Restaurantes</a></li>
                        <li><a href="#" style=" color: #fff;">Caf&eacute;s / Sangucher&iacute;as</a></li>
                        <li><a href="#" style=" color: #fff;">Pubs</a></li>
                  </ul>
                </li>
                <li><a href="#" style=" color: #fff;">OTROS SERVICIOS</a></li>
                <li><a href="#" style=" color: #fff;">CONT&Aacute;CTENOS</a></li>

              </ul>

            </div><!-- /.navbar-collapse --> 

Estilos CSS:

Código:

.dropdown-submenu {
		position: relative;
}

.dropdown-submenu>.dropdown-menu {
		top: 0;
		left: 100%;
		margin-top: -6px;
		/*margin-left: -1px;*/
		margin-left: 5px;
		font-size: 18px;
		-webkit-border-radius: 0 6px 6px 6px;
		-moz-border-radius: 0 6px 6px;
		border-radius: 0 6px 6px 6px;
}

.dropdown-submenu>a:after {
		display: block;
		content: " ";
		float: right;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 5px 0 5px 5px;
		border-left-color: #ccc;
		margin-top: 5px;
		margin-right: -10px;
}

.dropdown-submenu.pull-left {
		float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
		left: -100%;
		margin-left: 10px;
		-webkit-border-radius: 6px 0 6px 6px;
		-moz-border-radius: 6px 0 6px 6px;
		border-radius: 6px 0 6px 6px;
}

Espero puedan ayudarme. Gracias.