[jQuery] Problem with slideUp() in IE7
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???