Jquery Drop Down menu blinks only on IE

Question

I am starting a Jquery drop down menu for a new project and it is working as expected on Google Chrome, Firefox, Safari but of course it is giving me some headache on Internet Explorer.

here's the thing, See this page http://www.universidadedoingles.com.br/dev/index.ASP

on mouse over the menu HOME, the drop down appers, when you move over the links in IE you see some flashes of the background, which doesn't happens on Chrome and ETC.

here's the js coda I am using to do the dd menu.

<script type="text/javascript">
$(document).ready(function() {   
$("ul.mainmenu li.menuhome").mouseover(function(){
    $(".arrow-spacer").show(); //When mouse over ...
    //Following event is applied to the subnav itself (making height of subnav 150px)
    $(this).find('.submenu').show().animate({height: '150px', opacity:'1'},{queue:false, duration:300})     
});

$("ul.mainmenu li.menuhome").mouseout(function(){ //When mouse out ...
    //Following event is applied to the subnav itself (making height of subnav 0px)
    $(this).find('.submenu').hide().animate({height:'0px', opacity:'0'},{queue:false, duration:200})
});

//menu itembackground color animation           
$("li").hover(function() {
    $(this).animate();},
    function() {
        $(".arrow-spacer").hide();
    }); 
});
</script>

That's it, I guess it may be simple, but it's been weeks and I still can't get it to work.

Thanks a lot.

Answer 1

The thing is that the focus to <li> is lost when you mouse over an <a> element. Here is something you could use to overcome this. I avoided using the <a> tag, instead I used a JavaScript function to send the user to the preferred location. I used JavaScript rather than jQuery hoping to make it more self-explanatory.

        <script type="text/javascript" src="jquery.js" ></script>
        <script type='text/javascript'>
        $(document).ready(function() {
        $('#n li').hover(function() {
                $('ul', this).slideDown(200);
        $(this).children('a:first').addClass('h');
          }, function() {
        $('ul', this).slideUp(200);
        $(this).children('a:first').removeClass('h');   
      });
        });
        function gotoPage(pnumber){
            var goto;
            if(pnumber==1){
                goto="home.html";
            }else if(pnumber==2){
            goto="watsnew.html";
            }else if(pnumber==3){
                goto="aboutus.html";
            }else if(pnumber==4){
                goto="contactus.html";
            }
            window.location.href=goto;  
        }
</script>

<style type="text/css">
#n {
    padding: 0;
    list-style: none;
    padding-left: 15px;
    padding-right: 15px;
    width:5em;
}
#n li { 
    /*display:inline;*/
    background: none;
    position: relative;
    z-index: 1;
    font-weight:bold;
    margin: 0 auto; 
}
#n li .h { 
    background-color: #fff;
    border-left: 1px solid #CF3;
    border-right: 1px solid #CF3;
    color: #576482;
    height:20px; }
#n ul {
    position: absolute;
    display: none;
    margin: 0; padding: 0;
    list-style: none
    padding-bottom: 3px;
    width:200px;
}   
#n ul li {
    list-style-type:none;
    padding:10px;}
#n ul li:hover {
    background:#960;}

</style>


<div>
<ul id="n">
   <li>MENU
      <ul >
        <li value="1" onclick="gotoPage(this.value)">HOME</li>
        <li value="2" onclick="gotoPage(this.value)">WATS NEW</li>
        <li value="3" onclick="gotoPage(this.value)">ABOUT US</li>
        <li value="4" onclick="gotoPage(this.value)">CONTACT US</li>
      </ul>
   </li>
<ul>
</div>

Answer 2

I noticed that the anchor <a> tags have a margin on them. My first thing would be to try using padding instead. IE doesn't treat a hover in the margin the same way as other browsers.

Answer 3

in some cases it helps to set a z-index on elements that should placed in top of other elements.

In your case I would try to set the z-index on <ul class="submenu">

Answer 4

No blinks anymore! I changed one word hide() to stop (), now there is no blinking on iE. but...

After you show the menu 1 time, everytime you get your mouse below the link or close the link, the menu shows up again.

check this

www.universidadedoingles.com.br/dev

you'll be able to see its behavior