サブメニュー純粋なCSSとhtmlが消えます

Question

私はサブメニューを持つメニューを持っています。サブメニューはメインメニューに表示されたときに表示されますが、サブメニューに移動しようとするとほとんどの場合消えます。私が非常に速い場合にのみ、私はそれが消える前にそれに到達することができます。

HTML：

<header> 
<div class="wrapper"> 
     <a href="#" id="logo" class="fl"><img src="images/logo.png" width="125" height="20" alt=""></a> 
     <nav class="fl"> 
      <ul > 
       <li> <a href="#" class="selected">Target Groups</a> 
       <ul> 
        <li><a href="">Manage Target Groups</a></li> 
        <li><a href="">Create Target Group</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Activity</a></li> 
       <li><a href="#">Reports</a></li> 
       <li><a href="#">Settings</a></li> 
       <li><a href="#">Admin</a></li> 
      </ul> 
     </nav> 
      </div> 
      <!-- end .wrapper --> 
    </header> 

はCSS：

header{ 
margin-top: 30px; 
background: url(../images/header-bg.png) no-repeat; 
width: 942px; 
height: 76px; 
padding: 27px 25px 5px; 
} 
header .wrapper{ 
    border-bottom: 1px solid #e5e5e5; 
    float:left; 
    width: 862px; 
    padding: 0 40px 5px;   
    position:relative; 
} 
header nav{ 
    margin-left: 45px;   
} 
header nav ul{ 
    z-index: 100; 
} 
header nav ul li{ 
    display: inline;  
    margin-right: 35px; 
    line-height: 20px; 
    z-index: 100; 
} 
header nav ul li ul{ 
    display: none; 
    position:absolute;  
    width: 962px; 
    left: 0; 
    top: 40px; 
} 

header nav ul li ul li{ 
    float: left;  
} 

header nav ul li:hover ul{ 
    display:block; 
} 
header nav ul li a{ 
    font-size:16px; 
    color: #5b666a; 
    text-decoration: none; 
    padding: 5px 10px; 
} 
header nav ul li a.selected,header nav ul li a:hover{ 
    background: #657073; 
    color: white; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

私は本当にこだわっている、あなたが望むものを達成するために...

Answer 1

を助けてください、それはpadding-topを使用することをお勧めしますあなたのサブメニューでは、絶対的な位置付けの代わりに（後者では、メニューとサブメニューの間に空のスペースがあり、マウスアウトが発生します）

http://jsfiddle.net/BAzx7/

編集：私はul liにposition:relative;を追加し、ul li ulからz-index低く、それ以外のサブメニューは、メインメニュー上だろう - と、それを無効に...

http://jsfiddle.net/BAzx7/1/

Answer 2

I私のドロップダウンの1つにhoverIntentでこれを修正しました。当時IEのバグは排他的でしたが、簡単に修正できました。

http://cherne.net/brian/resources/jquery.hoverIntent.html

これは私の関数が見えた方法です。

$('.main-nav > ul > li').hoverIntent({ 
     timeout: 300, 
     over: function() { 
      $(this).addClass('hover') 
     }, 
     timeout: 300, 
     out: function() { 
      $(this).removeClass('hover') 
     } 
    }); 

私のマークアップは、サッカーフィッシュメニューの息子と同じ構造でした。