Bootstrap mega menu - znika po kliknięciu

Question

Witam, mam problem z megamenu które próbuję zrobić na mojej stronie. Wszystko otwiera się elegancko jednak po kliknięciu na dany element w rozwiniętym dropdownie, całe menu wyłącza się tak jak bym kliknął poza obszar tego dropdowna. Wiecie co z tym zrobić?

Tak wygląda kod menu:
 

<nav style="border: none; background: white; z-index:1200; height:80;"class="navbar navbar-default">
					
						<div class="navbar-header">
						  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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="img-responsive" id="logo" href="index.html"></a>
						</div>

						
						<div style="float: right; margin-right:-17;" class="collapse navbar-collapse js-navbar-collapse" id="bs-example-navbar-collapse-1">
						  <ul class="nav navbar-nav">
							<li class="dropdown mega-dropdown">
							  </br>
							  
							  
							  
							  <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stolarka PCV <span class="caret"></span></a>
							  <ul style="margin-top: 10;" class="dropdown-menu mega-dropdown-menu">
								<li style="background: #7d8999; height: 100%; padding: 0px 0px ;" class="col-sm-4">
								
									<ul>
										<li class="first"><a role="button" onClick="myFunction()" >OKNA INNOWACYJNE <span class="glyphicon glyphicon-menu-right"></span></a></li>
										<li><a role="button">OKNA ENERGOOSZCZĘDNE <span class="glyphicon glyphicon-menu-right"></span></a></li>
										<li><a role="button">OKNA STANDARDOWE <span class="glyphicon glyphicon-menu-right"></span></a></li>
										<li><a role="button">DRZWI TARASOWE <span class="glyphicon glyphicon-menu-right"></span></a></li>
										<li><a role="button">DRZWI <span class="glyphicon glyphicon-menu-right"></span></a></li>
										<li><a role="button">PANELE DRZWIOWE <span class="glyphicon glyphicon-menu-right"></span></a></li>

									</ul>

								
								</li>
								<li class="col-sm-1">
									<div id="oknainn"></div>
								
								</li>
							  </ul>
							</li>
						  </ul>
						  
						  <ul class="nav navbar-nav">
							<li class="dropdown mega-dropdown">
							  </br>
							  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stolarka Aluminium <span class="caret"></span></a>
							  <ul style="margin-top: 10;" class="dropdown-menu mega-dropdown-menu">
								<li style="background: #7d8999; height: 100%; padding: 0;" class="col-sm-4">
								
								
								</li>
								<li class="col-sm-1">
								
								
								</li>
							  </ul>
							</li>
						  </ul>
							</li>
						  </ul>
						  
						  <ul class="nav navbar-nav">
							<li class="dropdown mega-dropdown">
							  </br>
							  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Katalogi <span class="caret"></span></a>
							  <ul style="margin-top: 10;" class="dropdown-menu mega-dropdown-menu">
								<li style="background: #7d8999; height: 100%; padding: 0;" class="col-sm-4">
								
								
								</li>
								<li class="col-sm-1">
								
								
								</li>
							  </ul>
							</li>
						  </ul>
							</li>
						  </ul>
						  
						  <ul class="nav navbar-nav">
							<li class="nav-item">
								</br>
								<a class="nav-link" href="#">BLOG</a>
							</li>
						  </ul>
						  
						  <ul class="nav navbar-nav">
							<li class="nav-item">
								</br>
								<a class="nav-link" href="#">Kontakt</a>
							</li>
						  </ul>
						  
						</div>
					</nav>

 

Comments

Wrzuć na codepen czy coś podobnego

Answer 1

Kod działa, masz 2x zbędne 

</li></ul>

oraz kilka 

</br>

jak z XHTML.

https://codepen.io/r0v/pen/jvRyBx