Webサイト用に作業しているjquery/cssドロップダウンメニューがあります。これはうまく機能しますが、サブメニュー項目間を移動すると、選択したメインメニュー項目が、私が使用したcss境界線のために、テキストの色が1秒間だけ変化する点が異なります。これはあまり目立ちませんが、何年もの間私を悩ませてきました！サブメニューを区切る境界線を維持したいのですが、フラッシュは必要ありません。これを修正するために使用できるタイマーはありますか？または、ボックスの内側になるように境界線を作成できますか？助けてくれてありがとう！
これがjsfiddleです：http：//jsfiddle.net/BLvKK/1/
注：jqueryを介してロールオーバーをトリガーする代わりに、css：hoverプロパティを使用する方が経済的であることを認識しています。テストしていたため、この時点でjqueryを使用しました。
これが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>
これが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;
}
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');
});
</ p>
再度、感謝します！