Mac OS 10.6의 Chrome, Safari 및 Firefox에서 하위 메뉴가 사라짐

Question

지급 자 앱 메뉴 위로 마우스를 가져 가서 하위 메뉴의 항목 중 하나를 클릭하면 하위 메뉴가 모든 페이지의 http://curo.creativedynamite.co.uk에서 사라집니다.

Max OS 10.7을 실행 중이며 Chrome, Firefox, Safari에서 작동하지만 Snow Leopard (OS 10.6)를 실행하는 친구는 아닙니다.

<div id="navigation" class="clearfix"> 
     <div class="menu-main-menu-container"><ul><li><li id="menu-item-212" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-212"><a href="/">Home</a></li> 
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://curo.creativedynamite.co.uk/our-approach">Our Approach</a></li> 
<li id="menu-item-592" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-592"><a href="#">Payer Apps</a> 
<ul class="sub-menu"> 
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://curo.creativedynamite.co.uk/payer-apps/payerlogic">PayerLogic</a></li> 
    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://curo.creativedynamite.co.uk/payer-apps/accessaccelerator">AccessAccelerator</a></li> 
    <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://curo.creativedynamite.co.uk/payer-apps/charisma">CharismA</a></li> 
    <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://curo.creativedynamite.co.uk/payer-apps/r3tracker">R3Tracker</a></li> 
    <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://curo.creativedynamite.co.uk/payer-apps/prescriberlogic">PrescriberLogic</a></li> 
</ul> 
</li> 
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://curo.creativedynamite.co.uk/about-us">About Us</a></li> 
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://curo.creativedynamite.co.uk/careers">Careers</a></li> 
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://curo.creativedynamite.co.uk/blog">Blog</a></li> 
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://curo.creativedynamite.co.uk/news">News</a></li> 
</li></ul></div> </div><!-- navigation --> 

/* Navigation */ 
#navigation { min-height:30px; height:60px; margin-left:-20px; } 
    #navigation ul { list-style-type:none; text-align:center; padding:20px 0 0 0;} 
     #navigation ul li { list-style-image:none; padding:0.2em 1.8em; /* 0.3 1.3 with 7 menu options*/ font-size:1.3em; float:left; } 
     #navigation ul li a { color:#9d9fa0; padding:6px 10px; } 
      #navigation ul li a:hover { background:url("../images/bg_menu.gif") repeat-x left top #868888; color:#fff; text-decoration:none; padding:6px 10px; } 
       #navigation .current_page_item a { background:url("../images/bg_menu.gif") repeat-x left top #868888; color:#fff; padding:6px 10px; } 

        #navigation .current_page_item a, .current_page_item a:hover, .current_page_item a:visited { color:#fff; } 

/* Navigation - Drop down menu 
#navigation li ul.sub-menu li { position:absolute; left:-999em; height:auto; width:190px; font-weight:normal; margin:0; line-height:1; border-top:1px solid #cccccc; }*/ 

#navigation ul ul { 
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top:9em; 
    left: 55.6 em; 
    width: 168px; 
    z-index: 99999; 
    background-color:#fff; 
} 
#navigation ul ul li { 
    padding:0 0em; 
} 

#navigation ul ul ul { 
    left: 100%; 
    top: 0; 
} 
#navigation ul ul li a { 
    color:#9d9fa0; 
    font-size:14px; 
    font-weight: bold; 
    height: auto; 
    line-height: 0em; 
    padding: 10px 10px; 
    width: 175px; 
} 
#navigation ul ul :hover > a { 
    background:url("../images/bg_menu.gif") repeat-x left top #868888; color:#fff; 
} 
#navigation ul li:hover > ul { 
    display: block; 
} 
#navigation .current-menu-item > a, 
#navigation .current-menu-ancestor > a, 
#navigation .current_page_item > a, 
#navigation .current_page_ancestor > a { 
    font-weight: bold; 
} 

은 다른 사람이 어떤 생각을 가지고 있습니까 :

나는 나는 그것이 슬라이더와 헤더 이미지와 내가 사용 된 CSS 위치로 인해 줄 알았는데 처음에,이 이유 알아 내기 위해 노력 해왔다 제발?

Answer 1

이에서 top:9em;를 제거 ... 그것은 마우스가 그 안에 얻을 수있는 메뉴 버튼의 하단을 터치 할 수있는 다시 하위 메뉴를두고

#navigation ul ul { 
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top:9em; 
    left: 55.6 em; 
    width: 168px; 
    z-index: 99999; 
    background-color:#fff; 
} 

. 마우스가 :hover 항목의 초점을 잃지 않고 틈을 가로 질러 갈 수 없기 때문에 메뉴 버튼과 하위 메뉴 서랍 사이의 간격이 문제를 일으켰습니다.