Bug and hanging in the Nav bar submenu of HTML/CSS design

programming web dev
1

I have a bug and hanging in my Nav bar submenu of HTML design when clicking on a submenu link it’s working well at the first load. After that, When I go to any link and go back the nav bar submenu hanging out show and hide show and hide … you can check the video link of this bug issue: http://youtu.be/UiAMY0EHpJI

The Code

 	<!-- Navigation -->
 	     <div id="navigation">
 	       <div>
 	         <div>
 	
 	           <a data-toggle="collapse" data-target=".nav-collapse"> <span></span> </a>
 	
 	           <div id="logo">
 	             <a href="#home-section"></a>
 	           </div>
 	
 	           <div>
 	             <ul>
 	               <li>
 	                 <a href="#home-section">Home</a>
 	                 <ul>
 	                   <li><a href="revolution-slider.html">Revolution Slider</a></li>
 	                   <li><a href="index.html">Slider Parallax</a>
 	                     <ul>
 	                       <li><a href="style1.html">Style 1</a></li>
 	                       <li><a href="style2.html">Style 2</a></li>
 	                       <li><a href="style3.html">Style 3</a></li>
 	                       <li><a href="style4.html">Style 4</a></li>
 	                       <li><a href="style5.html">Style 5</a></li>
 	                     </ul>
 	                   </li>
 	                   <li><a href="video-bg.html">Video Background</a>
 	                     <ul>
 	                       <li><a href="video-bg.html">Self Hosted Video</a></li>
 	                       <li><a href="youtube-video-bg.html">Youtube Video</a></li>
 	                       <li><a href="vimeo-video-bg.html">Vimeo Video</a></li>
 	                     </ul>
 	                   </li>
 	                 </ul>
 	               </li>
 	               <li>
 	                 <a href="#we-are-good-at">About</a>
 	               </li>
 	               <li>
 	                 <a href="#services-section">Services</a>
 	               </li>
 	               <li>
 	                 <a href="#folio-section">Portfolio</a>
 	               </li>
 	               <li>
 	                 <a href="#team-section">Team</a>
 	               </li>
 	               <li>
 	                 <a href="#blog-section">Blog</a>
 	               </li>
 	               <li>
 	                 <a href="#clients-section">Clients</a>
 	               </li>
 	               <li>
 	                 <a href="#pricing-section">Pricing</a>
 	               </li>
 	               <li>
 	                 <a href="#contact-section">Contact</a>
 	               </li>
 	
 	             </ul>
 	           </div>
 	
 	         </div>
 	       </div>
 	     </div>
 	     <!-- Navigation --> 





 	/* ------------------------------- */
 	/*  Navigation CSS
 	/* ------------------------------- */
 	   .navbar .nav > li > a.change-colors:after{
 	     content:"\f107";
 	     color: #00c2a9;
 	     font-family:'FontAwesome';
 	     position: absolute;
 	     right: 10px;
 	   }
 	
 	   .navbar .nav > li > a.change-colors:hover,
 	   .navbar .nav > li > a.change-colors:focus{ 
 	     background: #fff;
 	     color: #00c2a9!important
 	   }
 	
 	   .is-sticky .navbar-inner {
 	     background: #00c2a9
 	   }
 	
 	   .is-sticky .navbar .nav > li > a{ 
 	     color: #fff
 	   }
 	
 	   .sticky .navbar .nav > li > a{
 	     color: #fff
 	   }
 	
 	   .navbar .nav > li > a:hover:after{
 	     content:"\f107";
 	     color: #fff!important;
 	     font-family:'FontAwesome';
 	     position: absolute;
 	     right: 10px
 	   }
 	
 	   ul.sub-menu {
 	     display: block
 	   }
 	
 	   .navbar .nav > li {
 	     position: relative
 	   }
 	
 	   .sub-menu {
 	     position: absolute;
 	     width: 150%;
 	     left: 0;
 	     padding: 4%;
 	     background: rgba(0,0,0,0.5)
 	   }
 	
 	   .navbar .nav .sub-menu li a{
 	     color: #fff!important;
 	     text-decoration: none;
 	     background: transparent !important;
 	     font-size: 12px
 	   }
 	
 	   .sub-menu ul li a.change-colors {
 	     color: #fff!important;
 	     background: transparent
 	   }
 	
 	   .navbar .nav .sub-menu{
 	     width: 170px;
 	   }
 	
 	   .navbar .nav .sub-menu li{
 	     float: none;
 	     text-align: left;
 	     position: relative;
 	   }
 	
 	   .navbar .nav .sub-menu a{
 	     padding: 10px 20px;
 	   }
 	
 	   .navbar .nav .sub-menu a:hover{
 	     color: #00c2a9!important;
 	   }
 	
 	   .navbar .nav .sub-menu .sub-menu{
 	     left: 100%;
 	     top: 0;
 	     margin-left: 3px;
 	   }
 	
 	   .navbar .nav li ul{
 	     display: none;
 	   }
 	
 	   .navbar-fixed-top{
 	     border-width: 0;
 	   }
 	
 	
 	   .loader {
 	     position: fixed;
 	     top: 50%;
 	     left: 50%;
 	     background: url(../images/3.gif) no-repeat;
 	     width: 32px;
 	     height: 32px;
 	     margin: -16px 0 0 -16px;
 	   }


 


So, please Is there anyone can help me? 


Kind Regards, 
Ameen.
2

Same with me
I also have some problem to modified the Nav menu at twenty twelve
just watching this group, perhaps there is some master can give suggestion

3

Are you using Bootstrap?

Any reason why you have this empty a tag with bootstrap collapse?

[COLOR=#008000]<a data-toggle=“collapse” data-rel=“nofollow” target=".nav-collapse">[/COLOR] [COLOR=#000080]<span>[/COLOR][COLOR=#000080]</span>[/COLOR] [COLOR=#008000]</a>[/COLOR]
I don’t think your issue is css related it might be your css conflicting with bootstrap js code if you are using it.

Get rid of that a tag I posted and see if it fixes your issue otherwise I need more info or if you posted a link to the site that would be easier and faster to debug.

Good Luck.