JQuery Slide Hover Menu Stuck on Mouseover [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

Go to: http://www.radiofriendly.freehosting.com/menu/menu2.html

Steps to reproduce problem:

1) Put your mouse over the "Insight Quick Links" link on the right in the teal background.

2) Once the Blue menu slides out, move your mouse into that area.

3) Now quickly move your mouse to the "Contract Details" link.

Notice the blue menu is still open. It should've closed. Can someone here show me exactly what I need to modify in the js to fix this bug. Please be specific as possible. I'm new to Jquery. Thanks!

Answer 1

I would say the problem is your structure inside of you div dropdowns. Change the ul/li INSIDE the drop down to

or something else and you won't see the problem. :D Sorry this isn't EXACTLY what you are looking for but it will solve the problem

<div id="navigation_vert">
  <ul>
    <li>
      <a href="#" class="navlink">Insight Quick Links</a>
      <div class="dropdown" id="dropdown_two">            
        <p>                       
          Some Text Stuff WITHOUT "<ul>" or "<li>"
        </p>
      </div><!-- .dropdown_menu --> 
    </li>
  </ul>
</div>

P.S. I would look at your sign-up on the bottom, the list there seems to have a nice bullet list that you MAY be able to model off or maybe even just wrapping the list in a div will solve all of the problems

 <li>
                  <a href="#" class="navlink">Insight Quick Links</a>
                  <div class="dropdown" id="dropdown_two" style="background: blue">            
                    <p>
                      <a href="">My Quotes (DAF)</a>
                      <a href="">My Opportunities</a>
                      <a href="">My Customer's Assets</a>
                      <a href="">Insight Partner Support</a>
                      <a href="">New Account Request Form</a>                        
                    </p>
                  </div><!-- .dropdown_menu --> 
                </li>

I know this changes what the page looks like but it works this way