下拉菜單懸停問題

Question

我正在閱讀拉我的頭髮！無論何時你在下拉導航菜單上方，懸停圖像都會下降到應有的位置並延伸。然後，當您嘗試將鼠標移到下拉區域時，下拉區域會消失。你可以在http://pauldrayton.com/sites/waterdamagesegeorgia/看到這個動作。我試着玩z-index來看看這是否可能是問題，但我還沒弄明白！

這是CSS。任何幫助，將不勝感激。

#access { 
display: block; 
float: left; 
margin: 0 ; 
margin-right:24px; 
margin-top:-30px; 
border-bottom: 2px solid #CCC ; 
width: 990px; 
z-index: 100; 
} 

#access .menu-header, 
div.menu { 
font-size: 14px; 
margin-left: 12px; 
} 

#access .menu-header ul, 
div.menu ul { 
list-style: none; 
float:right; 
position:relative; 
margin: 0 0; 
margin-right:24px; 
} 

#access .menu-header ul.sub-menu li { 
box-shadow: 3px 3px 3px #999; 
-moz-box-shadow: 3px 3px 3px #999; 
-webkit-box-shadow: 3px 3px 3px #999; } 

#access .menu-header li, 
div.menu li { 
float: right; 
position: relative; 
padding:0px; 
background:url(images/mantra_menu.png) top left no-repeat; 
height: 27px; 
margin-right:10px; 
    z-index: 101; 
} 

#access li.current_page_item { 
background:url(images/mantra_menu_current.png) top left no-repeat; 
border-bottom:none; 
} 

#access li.current-menu-item { 
background:url(images/mantra_menu_current.png) top left no-repeat; 
border-bottom:none; 
} 

#access a { 
color: #FFFFFF; 
display: block; 
height: 27px; 
margin-left:10px; 
padding-right: 10px; 
padding-top:4px; 
padding-right:25px; 
text-decoration: none; 
font-weight:normal !important; 
background:url(images/mantra_menu.png) top right no-repeat; 
position:relative; 
right:-10px; 
z-index: 102; 
white-space:nowrap; 
} 

#access .menu-header li:hover, 
div.menu li:hover, #access a:hover { 
color:#0C85CD ; 
} 

#access ul ul { 
display: none; 
position: absolute; 
top: 29px; 
right: 0px important; 
float: right; 
z-index: 104; 
background:url(images/mantra_menu_down.png) 0px 0px no-repeat; 
padding:12px 0px 0px; 
/*border-bottom:1px solid #CCC;*/ 
margin-top:-30px; 

} 
#access ul ul li { 
display:block !important; 
background:#FFF !important; 
/* border-left:1px solid #CCC; 
border-right:1px solid #CCC;*/ 
margin-left:0 !important; 
margin-right:0px !important; 
/*padding-left:10px; 
padding-right:10px;*/ /* disabled for submenu width fix */ 
padding-top:6px; 
z-index: 105; 
} 

#access ul { } 
#access ul li { } 
#access ul li ul { 
display: none; /* submenu width fix */ } 

#access ul ul li { /* level 2 */ 
border: 0; 
width: 100%; /* submenu width fix */ 
border-left: 1px solid #EEE; 
border-right: 1px solid #EEE; 
border-bottom: 1px solid #EEE; 
white-space: pre; 

} 

#access ul ul ul li { /* level 3 */ 
border: 0; 
/* width: 100%;*/ 
    width: auto; 
    display: block; 
    float: none; 
    border-top: 1px solid #EEE; 
    border-right: 1px solid #EEE; 
    border-bottom: 1px solid #EEE; 
    white-space: pre; /* submenu width fix */ 
    z-index: 106;} 

#access ul ul a { display: block; padding: 3px 20px 0 10px !important; 
/* submenu width fix */ } 

#access ul ul a, #access ul ul ul a { 
margin:0 !important;/*padding:0 !important;*/ 
left:0 !important; 
color:#5F5B5B; 
border-bottom:none; 
background:none !important; 
} 

#access ul ul li:hover, #access ul ul ul li:hover { 
background:#FCFCFC !important; 
} 

#access ul ul ul { 
left: 100%; 
top: 0; 
background:url(images/mantra_menu_right.png) 0px 0px no-repeat; 
padding:0px 0px 0px 12px; 
    z-index: 107; 
/*border:1px solid #CCC;*/ 
} 

#access li:hover > a { 
color:#0E85CD ; 
} 

#access ul ul :hover > a { 
color:#0E85CD; 
} 

#access ul li:hover > ul { 
display: block; 
    z-index: 108; 
} 
#access ul li.current_page_item > a, 
#access ul li.current-menu-item > a{ 

color: #000 !important; 
background:url(images/mantra_menu_current.png) top right no-repeat; 
} 

#access ul ul li.current_page_item , 
#access ul ul li.current-menu-ancestor, 
#access ul ul li.current-menu-item , 
#access ul ul li.current-menu-parent { 
color: #000 !important; 
background:#FFF !important; 
} 


* html #access ul li.current_page_item a, 
* html #access ul li.current-menu-ancestor a, 
* html #access ul li.current-menu-item a, 
* html #access ul li.current-menu-parent a, 
* html #access ul li a:hover { 
color: #5F5B5B ; 
background:url(images/mantra_menu_current.png) top right no-repeat; 
} 

Answer 1

我做了以下修改：

#menu-main-navigational { 
     position:relative; 
    } 
    #access .menu-header ul { 
     position:absolute; 
    } 

和它的工作對我來說

Answer 2

給.sub-menu元素指定絕對位置而不是相對位置。這個相對原因會迫使它的父元素擴展。您還需要給它一個固定的寬度，因爲它將不再調整到其父項。並編輯出任何覆蓋該元素屬性的規則。