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元素提供绝对位置而不是相对位置。相对使它强制其父元素展开。您还需要给它一个固定的宽度，因为它将不再调整其父级。并编辑出覆盖元素上该属性的任何规则。

下拉菜单悬停问题

2 个答案: