I'm trying to create a simple sliding menu, sort of like an accordion, but not that complicated, using jQuery 1.2.6. It was working great until I tested it in IE7 (surprise, surprise, right?). The slideDown() works fine, but when the slideUp() function runs, it seems to push the submenu to the right about 100px or so. I thought it was a problem with my CSS, but even with no stylesheets at all it still does the same thing. I also tested the slideToggle() function, but got the same behavior.
I guess it goes without saying that I'm a jQuery (and Javascript in general) n00b, and I need some help. So I created a sample page with just the affected code and posted it here: http://chrisnewkirk.com/slide.html And just so you don't have to click the link if you don't want, here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fun with jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/ jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#main-nav ul").hide(); $("#main-nav li:has(ul)").hover( function() { $(this).children("ul").slideDown(); }, function() { $(this).children("ul").slideUp(); } ); }); </script> </head> <body> <ul id="main-nav"> <li> <span>Item 1</span> <ul> <li>Sub-Item 1.1</li> <li>Sub-Item 1.2</li> </ul> </li> <li> <span>Item 2</span> <ul> <li>Sub-Item 2.1</li> <li>Sub-Item 2.2</li> <li>Sub-Item 2.3</li> <li>Sub-Item 2.4</li> </ul> </li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> oddly enough, this works great in IE6 (and every other browser I could find), just not IE7... Any ideas???
