Navigation menu - background on hover behave strangely

Question

I have a problem with a navigation menu for which I have applied pie.js (library that allows you to have css3 on ie6-8 browsers). Works well at first sight but if we will play a little bit with the menu, wrong behavior will raise:(. To receive that strange behavior you must move cursor a little faster left and right over the drop-down menu on IE8. This is a function through I call js library.

$(document).ready(function(){
    if (window.PIE) {
        $('.aahov,ul#menu,ul#menu li ul').each(function(){
            PIE.attach(this);
        });
    }

});

Check this example: http://mainpage.ueuo.com

...and don't forget, only on IE8 browsers ...

Thank's.

Answer 1

It might just be IE8 adding some extra padding.

I noticed from your css that you aren't using a css reset which may help to eliminate browser based differences.

You could have a look at http://meyerweb.com/eric/tools/css/reset/ or something similar.

Also IE8 doesn't support last-child

ul#menu li ul li:last-child{ border-bottom:none; }

So this will also affect the look of your menu items.

Also as a side note from a usability point of view it would be good practice to let the user know that the menu link is a drop down. Possibly add a down arrow to the right of the link.

Answer 2

Your scripting looks good to me, it looks like it's something in your styling. Not really sure what you have there, but you might be able to work it around to use overflow:hidden, or at least that might be a place to start.