Menu glitchy on top of slideshow

Question

I have implemented the following set up (after being requested):

slideshow of images changing, after the user mouse over, the menu would appear in the top right corner, it would disappear on mouse out. The problem is that the menu is glitchy when I try to mouseover its items, it happens in both IE6/7 and FF 3.5.

I have tried Jquery hover, mouseenter/mouseleave, all with the same result. http://www.codecookery.com/test/index.html

is it possible to make it not glitchy at all?

Answer 1

You're better off using .hover than .mouseenter/leave.

The real problem, though, is that the menu is outside the slideshowwrapper, so hovering over the menu counts as leaving the slideshowwrapper. Change your html to the following, nesting the menu in the slideshowwrapper, and revert to using the .hover function::

<div id="slideshow-wrapper">
    <div id="slideshow">
        <img src="images/image1.jpg" alt="Slideshow Image 1" class="active" />
        <img src="images/image2.jpg" alt="Slideshow Image 2" /> 
        <img src="images/image3.jpg" alt="Slideshow Image 3"  /> 
        <img src="images/image4.jpg" alt="Slideshow Image 4"  /> 
    </div>

    <div id="main-menu">
        <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">store</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>    
                <li><a href="#">login</a></li>  
        </ul>   
     </div>
</div>