髪を抜くために読んでいます！ドロップダウンナビゲーションメニューにカーソルを合わせると、ホバー画像が本来あるべき場所の下にドロップして引き伸ばされます。次に、マウスを使用しようとすると、ドロップダウン領域が消えます。これは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;
}