jquery script only works in IE 7 but I need cross compatibility...

Question

Any reason as to why this script won't work in any other browser. HERE'S the JsFiddle

The effect in IE 7, which is correct...is that the menu scrolls down and as you hover over the menu items and they animate by shifting to the right for the "on hover" of an <li> object.

The effect in FF 3.5 is incorrect. The menu dropdowns, will scroll down when you hover OUT and stay scrolled down until hover IN. The animation flickers and doesn't shift the hovered in cell.

I'm using this in the header

      <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;   

and this is my script code

  <div id="menu_container"> 

           <ul id="menu"> 
            <li><a href="#">Home </a></li>
             <li><a href="#" id="places">About Us</a> 
                <ul id="dropdown1"> 
                    <li><a href="http://google.com"&gt;Our Founder</a></li> 
                    <li><a href="#">Our Mission</a></li> 
                </ul> 
            </li> 
            <li><a href="#">Meet The Team</a> 
                <ul id="dropdown2"> 
                    <li><a href="#">Our Founder</a></li> 
                    <li><a href="#">Our Directors</a></li> 
                    <li><a href="#">Our Teachers</a></li> 
                    <li><a href="#">Employment Opportunities</a></li> 

                </ul> 
            </li> 
            <li><a href="#">Testimonials</a>
                <ul>
                    <li><a href="#">Students</a></li>
                    <li><a href="#">Adults</a></li>
                    <li><a href="#">Corporate</a></li>
                </ul>
            </li>

              <li><a href="#">Programs</a>
                <ul>
                    <li><a href="#">Student Services</a></li>
                    <li><a href="#">Adult Programs</a></li>
                    <li><a href="#">Business Program</a></li>
                    <li><a href="#">Community</a></li>
                </ul>
            </li>
               <li><a href="#">Press Releases</a>

            </li>
            <li><a href="#">Sponsoring Partnerships</a></li>
        </ul> 

    </div> 
   </div> 
    <div id="mid_header"> 


    </div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</form>

 <script type="text/javascript" > 


    $(function() {
        $('#menu li li').hover(function() {

            $(this).animate({ paddingLeft: '+=15px' }, 300);

        }, function() {

            $(this).animate({ paddingLeft: '-=15px' }, 300);

        });

        $("#menu li").hover(function() {

            $(this).find("ul").slideToggle(400);

            $(this).find("a").toggleClass("dropdownhoverIn");


        });


    });

</script> 

Answer 1

This looks hilarious when you run it! What fun, everything shifting around like that.

Ok, this is from the slideToggle documentation: If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed.

So I did this and it behaves better in Firefox 3 and IE8:

$("#menu li ul").hide(); // <--- I added this line
$("#menu li").hover(function() {
    $(this).find("ul").slideToggle(400);
    $(this).find("a").toggleClass("dropdownhoverIn");
});