jQuery dropdown menus not working in IE

JavaScript
1

In addition to an accordion-related problem in IE (see http://www.sitepoint.com/forums/javascript-15/jquery-accordion-click-not-working-ie-752325.html), I’m having a headache regarding drop down menus.

Again, this is only in IE (version 8) - every other browser in the known galaxy responds well to the JS and the HTML setup.

The idea is there’s a horizontal nav bar of five ‘blocks’, each with a heading. Hover over the heading and the ‘block’ (actually an <li>) extends to accommodate a small sentence underneath with a link. Hover off, and the block shrinks back to its original form, with the link hidden.

All good in FF, Opera, Safari, Chrome. In IE, though, the <li> block doesn’t extend - the link is shown beneath it, but it’s outside its frame and looks awful.

Here’s the HTML:

<ul id=“navH”>
<li><span>Home</span><a href=“index_link.php”>Click here to return to the index page</a></li>
<li><span>About us</span><a href=“about_us.php”>Find out about the website members and their details</a></li>
<li><span>Contact us</span><a href=“contact.php”>Interested in health psychology? Drop us a message</a></li>
<li><span>Careers</span><a href=“careers.php”>Options for careers and study in health psychology</a></li>
<li><span>Links</span><a href=“links.php”>A list of links to relevant sites that might be of interest</a></li>
</ul>

And here’s the jQuery:

$(‘#navH li a’).css({
display: “none”,
});

$(‘#navH li’).hoverIntent(function() {
$(this)
.animate({height: ‘+=35px’}, 300)
.find(‘a’)
.fadeIn()
.stop(true, true)
}, function() {
$(this)
.animate({height: ‘-=35px’}, 300)
.find(‘a’)
.stop(true,true)
.fadeOut(‘fast’);
});

Thanks in advance guys.

2

Not 100% sure without seeing it, but perhaps the span is being interpreted as a block level element instead of inline…pushing the link below it? If that’s the case I would try something like:
<li><span style=“display:inline;”>Home</span><a href=“index_link.php”>Click here to return to the index page</a></li>

3

So here’s an interesting postscript to this quandary. I’m using a lot of CSS3 specs in this project, including border-radius on the divs. To simulate the border-radius effect in IE I stumbled across a plugin called Curvy Corners which everyone seemed to be raving about.

Now this was just a plain accident, but in mucking around with browser tests, I inadvertently severed the link to the Curvy Corners include in my header. I only noticed this because suddenly all my divs in IE suddenly showed sharp corners. But I also noticed that, rather miraculously, most of my IE problems disappeared, namely:

  • the accordion not working
  • drop down menus not functioning properly
  • whereas before all my jQuery effects had been horribly jerky in IE, suddenly they were smooth.

It’s odd, cos the plugin only had a 30K footprint, but it seemed to be the root cause of numerous problems. Removing it has made things much smoother, and more importantly, all my snazzy effects work!

The only drawback is my boxes have sharp corners in IE. I could draw up some curved images in Fireworks but I’m stuffed if that’s going to happen at this late stage; IE users won’t even know the difference.