jquery menu déroulant clignotement momentané

Question

J'ai un menu déroulant jquery/css sur lequel je travaille pour un site web. Cela fonctionne bien, sauf que lorsque vous naviguez entre les éléments du sous-menu, l'élément de menu principal sélectionné change de couleur pour une seconde en raison de la bordure CSS que j'ai utilisée. Ce n'est pas très perceptible, mais ça me dérange depuis des lustres! Je veux garder la frontière séparant les sous-menus, mais je ne veux pas le flash! Y a-t-il une minuterie que je pourrais utiliser pour résoudre ce problème? Ou pourrais-je faire la bordure pour qu'elle soit dans la boîte? Merci beaucoup pour toute aide!

Voici le jsFiddle: http://jsfiddle.net/BLvKK/1/

Note: Je suis conscient qu'il serait plus économique d'utiliser le code CSS: hover propriété au lieu de déclencher les survols par jquery, je viens d'utiliser jquery à ce moment parce que je le tester.

Voici le code html:

<div id = "nav_div"> 
      <ul id="navigation"> 
       <li id="home"> 
       <a href="#" class="nav_style" id="home_a">Home</a> 
      </li> 
      <li id="sign_ups"> 
       <a href="#" class="nav_style" id="sign_ups_a">Sign-ups</a> 
       <ul class="sub_nav_style" id="sign_ups_sub"> 
        <li> 
         <a href="#">Camper Sign-up</a> 
        </li> 
        <li> 
         <a href="#">Junior Counselor Sign-up</a> 
        </li> 
        <li> 
         <a href="#">Counselor Sign-up</a> 
        </li> 
       </ul> 
      </li> 
      <li id="info"> 
       <a href="#" class="nav_style" id="info_a" name="info_a">Information</a> 
       <ul class="sub_nav_style" id="info_sub"> 
        <li> 
         <a href="#">Facts You Need</a> 
        </li> 
        <li> 
         <a href="#">Contact Information</a> 
        </li> 
        <li> 
         <a href="#">Vendor Information</a> 
        </li> 
       </ul> 
      </li> 
      <li id="about_camp"> 
       <a href="#" class="nav_style" id="about_camp_a" name="about_camp_a">About Camp</a> 
       <ul class="sub_nav_style" id="about_camp_sub"> 
        <li> 
         <a href="#">What People Say</a> 
        </li> 
        <li> 
         <a href="#">Sample Menu</a> 
        </li> 
        <li> 
         <a href="#">Photos</a> 
        </li> 
       </ul> 
      </li> 
      <li id="donate"> 
       <a href="#" class="nav_style" id = "donate_a">Make a Donation</a> 
      </li> 
     </ul> 

Voici le css:

ul{ 
margin:0 auto; 
padding:0; 
list-style-type:none; 
} 
a{ 
text-decoration:none; 
} 
#nav_div{ 
width:100%; 
height:36px; 
background:#b9bbbd; 
text-align:center; 
z-index:1; 
} 
ul#navigation{ 
text-align:center; 
float:left; 
} 
ul#navigation li{ 
float:left; 
min-width:170px; 
font-size:13px; 
} 
ul.sub_nav_style { 
position:absolute; 
display:none; 
padding-top: 10px; 

} 
ul.sub_nav_style li{ 
font-family:Tahoma, Geneva, sans-serif; 
clear:both; 
background:#b9bbbd; 
border-bottom:1px solid #999999; 
} 
ul.sub_nav_style li a{ 
color:#FFFFFF; 
} 
a, 
a:active, 
a:visited { 
display:block; 
padding:10px; 
} 
.nav_style{ 
font-family:Tahoma, Geneva, sans-serif; 
font-size:13px; 
background:#b9bbbd; 
color:#FFFFFF; 
} 
.nav_style:hover{ 
font-family:Tahoma, Geneva, sans-serif; 
font-size:13px; 
background:#114878; 
color:#000000; 
} 
.nav_style_roll_off{ 
font-family:Tahoma, Geneva, sans-serif; 
font-size:13px; 
background:#b9bbbd; 
color:#114878; 
} 
.sub_nav_style_bround_roll{ 
background:#25313d; 
} 

Heres le JQuery:

// JavaScript Document 
$(document).ready(function() { 

    //sub rolls sign ups 
    $("ul#navigation li#sign_ups ul li:eq(0) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#sign_ups_a").toggleClass("nav_style_roll_off"); 
    }); 
    $("ul#navigation li#sign_ups ul li:eq(1) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#sign_ups_a").toggleClass("nav_style_roll_off"); 
    }); 
    $("ul#navigation li#sign_ups ul li:eq(2) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#sign_ups_a").toggleClass("nav_style_roll_off"); 
    }); 
    // sup rolls info 
    $("ul#navigation li#info ul li:eq(0) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#info_a").toggleClass("nav_style_roll_off"); 
    }); 
    $("ul#navigation li#info ul li:eq(1) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#info_a").toggleClass("nav_style_roll_off"); 
    }); 
    $("ul#navigation li#info ul li:eq(2) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#info_a").toggleClass("nav_style_roll_off"); 
    }); 
    //sub rolls about_camp 
    $("ul#navigation li#about_camp ul li:eq(0) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#about_camp_a").toggleClass("nav_style_roll_off"); 
    }); 
    $("ul#navigation li#about_camp ul li:eq(1) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#about_camp_a").toggleClass("nav_style_roll_off"); 
    }); 
    $("ul#navigation li#about_camp ul li:eq(2) a").hover(function() { 
     $(this).toggleClass("sub_nav_style_bround_roll"); 
     $("#about_camp_a").toggleClass("nav_style_roll_off"); 
    }); 
}); 
//slide toggles 
$("#sign_ups").hover(function() { 
    $("#sign_ups_sub").slideToggle('fast'); 
}); 
$("#info").hover(function() { 
    $("#info_sub").slideToggle('fast'); 

}); 
$("#about_camp").hover(function() { 
    $("#about_camp_sub").slideToggle('fast'); 
}); 

Merci encore!

Answer 1

Si vous souhaitez que le texte reste blanc, il suffit de retirer .toggleClass("nav_style_roll_off"); de partout:

MISE À JOUR: Pour supprimer le clignotement: http://jsfiddle.net/BLvKK/7/