IEを除いて完全に機能するWebサイトでドロップダウンメニューを使用しています。
私はこれを理解するために過去2時間費やしましたが、問題が何であるかを理解できないようです。
私はメニューにスーパーフィッシュを使用しています。リンクからマウスを離すと、メニューは約2〜3秒間画面に表示されたままになり、位置が少しずれます。
ulでcss修正を試しましたが、残っているインスタンスではなく、jqueryドロップダウンにのみ適用されました。
これらの画像は、何が起こっているかを示しています。
これがメニューのcss/htmlです。
マークアップ
<div class="main-menu">
<div class="menu-header">
<ul id="menu-main" class="menu sf-js-enabled">
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
<a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/">
Ashton Klein
<span class="sf-sub-indicator"> »</span>
</a>
<ul class="sub-menu" style="visibility: hidden; display: none;">
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
<a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/about/">
About
<span class="sf-sub-indicator"> »</span>
</a>
<ul class="sub-menu" style="visibility: hidden; display: none;">
<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
<a href="http://wp.ashtonklein.com/ashton-klein/about/who-we-are/">Who we are</a>
</li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
<a href="http://wp.ashtonklein.com/ashton-klein/about/our-vision/">Our Vision</a>
</li>
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
<a href="http://wp.ashtonklein.com/ashton-klein/about/our-commitment/">Our Commitment</a>
</li>
</ul>
</li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
<a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/opportunities/">
Opportunities
<span class="sf-sub-indicator"> »</span>
</a>
<ul class="sub-menu" style="display: none; visibility: hidden;">
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
<a href="http://wp.ashtonklein.com/ashton-klein/opportunities/careers/">Careers</a>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
<a href="http://wp.ashtonklein.com/ashton-klein/opportunities/franchising/">Franchising</a>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
<a href="http://wp.ashtonklein.com/ashton-klein/opportunities/marketing-opportunities/">Marketing</a>
</li>
</ul>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
<a href="http://wp.ashtonklein.com/ashton-klein/newsroom/">Newsroom</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
#header .webmenu .main-menu ul
{
width:100%;
height:40px;
}
#header .webmenu .main-menu ul li
{
float:left;
line-height:30px;
font-family: 'Philosopher', arial, serif;
font-size:18px;
height:30px;
margin:5px 15px 5px 0;
padding:0 10px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius: 4px;
position: relative;
z-index: 20px;
display:block;
}
#header .webmenu .main-menu ul li.current-menu-item, #header .webmenu .main-menu ul li.current-menu-parent, #header .webmenu .main-menu ul li.current-page-ancestor
{
background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li a
{
color:#FFF;
text-decoration:none;
display:block;
outline:none;
}
#header .webmenu .main-menu ul li:hover
{
background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li span.sf-sub-indicator
{
display:block;
float:right;
width:6px;
height:4px;
background:url('../images/menu_arrow.png') no-repeat right;
margin-left:10px;
margin-top:13px;
text-indent:-9999px;
}
#header .webmenu .main-menu ul li ul.sub-menu
{
position:absolute;
display:none;
/* corners */
border-radius:0 4px 4px;
-moz-border-radius:0 4px 4px;
-webkit-border-radius:0 4px 4px;
background:#007E63;
padding:5px;
height:auto;
width:200px;
}
#header .webmenu .main-menu ul li:hover ul.sub-menu
{
display:inherit;
left:0px;
top:28px;
}
#header .webmenu .main-menu ul li ul li
{
display:block;
float:none;
background:none;
margin-right:0;
padding:0 10px;
margin:0 0 3px;
}
#header .webmenu .main-menu ul li ul li:hover
{
background:#333333;
}
#header .webmenu .main-menu ul li ul li a, #header .webmenu .main-menu ul li ul li a:hover
{
color:#FFF;
}
#header .webmenu .main-menu ul li ul li.current-menu-item, #header .webmenu .main-menu ul li ul li.current-menu-parent
{
background:#333333;
}
#header .webmenu .main-menu ul li ul li span.sf-sub-indicator
{
background:url('../images/menu_arrow_sub.png'); background-repeat:no-repeat;
float:right;
margin-left:10px;
width:16px;
height:16px;
margin-top:8px;
text-indent:-9999px;
}
#header .webmenu .main-menu ul li ul.sub-menu li ul.sub-menu
{
position:absolute;
left:-999em;
/* corners */
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#007E63;
padding:5px;
height:auto;
width:200px;
}
#header .webmenu .main-menu ul li ul.sub-menu li:hover ul.sub-menu
{
left:200px;
top:0;
}
jQuery
$('ul.menu').superfish({
delay: 1000, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'slow', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
私はあなたが提供できるどんな助けにも感謝します！
http://www.stylishmedia.co.uk/ak/
これがテストバージョンへのリンクです