下拉菜单悬停问题

我正在阅读拉我的头发！无论何时你在下拉导航菜单上方，悬停图像都会下降到应有的位置并延伸。然后，当您尝试将鼠标移到下拉区域时，下拉区域会消失。你可以在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; 
}

来源

2012-05-14 rkillough

顺便说一句，你的“返回顶部”按钮覆盖ontop的你的Facebook/Twitter的标志的，如果你的屏幕小于1240px –

我做了以下修改：

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

和它的工作对我来说

来源

2012-05-14 20:51:13 Michaeldcooney

完美！非常感谢你！ – rkillough

给.sub-menu元素指定绝对位置而不是相对位置。这个相对原因会迫使它的父元素扩展。您还需要给它一个固定的宽度，因为它将不再调整到其父项。并编辑出任何覆盖该元素属性的规则。

来源

2012-05-14 20:51:02

谢谢！我现在开始工作了。你们真棒。 – rkillough

下拉菜单悬停问题

回答

相关问题