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

**URL:** https://forum.kirupa.com/t/bug-and-hanging-in-the-nav-bar-submenu-of-html-css-design/351940
**Category:** web dev
**Created:** [October 20, 2014, 12:41am UTC](https://forum.kirupa.com/t/bug-and-hanging-in-the-nav-bar-submenu-of-html-css-design/351940 "2014-10-20T00:41:36Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Mohamed\_Ameen](https://avatars.discourse-cdn.com/v4/letter/m/df788c/32.png) [@Mohamed\_Ameen](https://forum.kirupa.com/u/Mohamed_Ameen)
#### Post date: [October 20, 2014, 12:41am UTC](https://forum.kirupa.com/t/bug-and-hanging-in-the-nav-bar-submenu-of-html-css-design/351940/1 "2014-10-20T00:41:36Z")

</div>

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](http://youtu.be/UiAMY0EHpJI)

```
The Code

```

```auto
 	<!-- 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 --> 

```

```auto
 	/* ------------------------------- */
 	/* 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.
```

---

<div class="post-metadata">

### Author: ![balitour](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/balitour/32/7083_2.png) [@balitour](https://forum.kirupa.com/u/balitour)
#### Post date: [October 21, 2014, 4:31am UTC](https://forum.kirupa.com/t/bug-and-hanging-in-the-nav-bar-submenu-of-html-css-design/351940/2 "2014-10-21T04:31:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![grimdeath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/grimdeath/32/7124_2.png) [@grimdeath](https://forum.kirupa.com/u/grimdeath)
#### Post date: [October 23, 2014, 5:33pm UTC](https://forum.kirupa.com/t/bug-and-hanging-in-the-nav-bar-submenu-of-html-css-design/351940/3 "2014-10-23T17:33:38Z")

</div>

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.