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

HTML & CSS
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:

     <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 HTML-->

/* ------------------------------- /
/ 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

Is there any Javascript associated with this? I don’t see the navigation hover part hapening in this CSS code. Do you have a live link?

3

The CSS that you have posted does not match the HTML. We’ll need to see CSS that matches the HTML.

A working page, one that starts with the doctype and ends with </html> and demonstrates the issue would be ideal. … or a link to the working site for Ryan

4

yes, there’s a Javascript associated. If it will help I can copy it to you here.
I uploaded it to: http://shattastore.com/mentos/dezigni/index.html

5

Yes ronpat, It starts with just I copied the nav bar menu and submenu area.
Please check the link: http://shattastore.com/mentos/dezigni/index.html

6

JS code:

    //$('ul.sub-menu').hide();
});
$('ul.sub-menu').hide();
$('.nav li').hover(function(){
    $(this).find(' > ul.sub-menu').slideToggle('fast');
});