하위 메뉴 순수 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/

편집 : - ... 그리고 그것을 사용하지

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

Answer 2

I를 그리고 그렇지 않으면 하위 메뉴가 주 메뉴를 통해 것, ul li에 position:relative;을 추가하고, 낮은 z-index-ul li ul 드롭 다운 중 하나에 마우스를 올려 놓으면이 문제가 해결되었습니다. 당시 독점적 인 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') 
     } 
    }); 

내 마크 업은 빨판 물고기 메뉴의 아들과 같은 구조였습니다.