CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
alonblack
alonblack

Reputation: 955

Drop down menu animation gets stuck

The animation of the drop down menu gets stuck while it is supposed to create a slide effect animation

JSFiddle link: http://jsfiddle.net/uqcLn/73/

This is the css that may have caused the problem but it is necessary to my code (it makes the bottom div's of my site stationary) so it cannot be changed.

    #nav ul ul {
    display: none;
    z-index: 1000;
}

  #nav ul li:hover > ul {
    position: absolute;
    display: block;
}

Upvotes: 0

Views: 143

Answers (1)

Overlugged
Overlugged

Reputation: 39

With this your code is already more valid

       <div id="top_menu">
  <div id="logo"><a href="index.html"><img src="images/logo.png"></a></div>
    <div id="nav">
      <ul>
        <li class="links_wrapper"><a href="about_us.html" title=" About us">ABOUT US</a>
          <ul class="dropdown">
          <li><a href="#">About us</a></li>
          <li><a href="#">Our Vision</a></li>
          <li><a href="#">Our Technology</a></li>
          <li><a href="#">Our Customers</a></li>
        </ul></li>
        <li class="links_wrapper"><a href="solution.html">SOLUTIONS</a>
        <ul class="dropdown">
          <li><a href="#"> Solutions</a></li>
          <li><a href="#">General Descreption</a></li>
          <li><a href="#">Detailed Descreption</a></li>
        </ul></li>
        <li class="links_wrapper"><a href="customers.html">CUSTOMERS</a>
        <ul class="dropdown">
          <li><a href="#"> Solutions</a></li>
          <li><a href="#">General Descreption</a></li>
          <li><a href="#">Detailed Descreption</a></li>
        </ul></li>
        <li class="links_wrapper"><a href="#">CONTACT US</a>
          <ul class="dropdown">
          <li><a href="#">Solutions</a></li>
          <li><a href="#">General Descreption</a></li>
          <li><a href="#"> Descreption</a></li>
        </ul></li>
    </ul>        
    <div id="login">LOGIN</div>
    <div id="lang_btn"><a href="#">He</a>&nbsp; &nbsp;<a href="#">En</a>
    </div><!--close nav-->
</div><!--top menu-->

You should from time to time test your code inside W3C's validator

http://validator.w3.org/

Upvotes: 1

Related Questions