0

テスト サイトは次のとおりです: http://rjewkes.com/index.php

メニュー項目にカーソルを合わせると、「li span」要素が「li」要素の前でカットされていることがわかります。でも逆に欲しい。適切に z インデックスを付けていますが、何らかの理由で機能しません。

ul#topnav {
margin: 0 0 0 0; 
padding: 0;
float: left;
width: 1000px;
height:28px;
list-style: none;
position: relative;
background:url(images/navbar.jpg) no-repeat;
background-position:top left;
z-index:1000;
}
ul#topnav li {
float: left;
margin-top: 0; 
padding: 9px 0px 5px 0px;
z-index:1000;
}
ul#topnav li a {
float:left;
padding: 0 25px;
font-size:11px !important;
font-weight:bold;
display: block;
border:#transparent solid 1px;
color: #003654;
text-decoration: none;
z-index:1000;
}
ul#topnav li:hover {
background-color:#FFF;
position:static;
margin: -1px -1px 0 -1px !important;
padding-bottom:15px !important;
border-right: 1px solid #ccc;
border-top:#CCC solid 1px;
border-left:#CCC solid 1px;
z-index:1000;
}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; 
top:24px;
display: none;
width: 998px;
background-image:url(images/opacity.png);
color: #ccc;
z-index:1000;
}
ul#topnav li:hover span { 
display: block;
height:140px;
border: 1px solid #ccc;
margin-top:7px;
margin-left:-1px;
z-index:997;
-moz-box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180,     Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
}
ul#topnav li span a { 
background: transparent;
font-size:11px !important;
text-align:left;
border-left: 1px solid #ccc;
margin:5px 0 10px -1px;
padding:0 10px 0 20px;
width:100px;
height:130px;
display: inline;
z-index:997;
}
ul#topnav li span a:hover {
text-align:left;
color:#449ec7;
text-decoration: none;
z-index:997;
}
ul#topnav li span img {
position: relative;
float:right;
margin:10px 20px 0 0;
padding:0 0 0 0;
z-index:997;
}

この問題の解決に役立つフィードバックをいただければ幸いです。

4

1 に答える 1

1

これは完全な回答ではありませんが、コメント機能はまだ使用できません..

<span>要素のみが position:absolute を使用しているため、z-index はここでは機能しません。要素にどのような z-index を指定しても、<li>それは重要ではありません。これは、要素が<li>絶対配置されておらず、DOM の順序に従うようにバインドされているためです。

残念ながら、現在のマークアップでこれを行う簡単な方法は思いつきません。要素の絶対位置は<li>機能しますが、メニューを柔軟に保ちたい場合は、混乱するため、まったくお勧めできません。私が考えるかもしれない他の解決策は、メニューのマークアップを根本的に変更するか、小さなデザイン変更を行う必要があります. 残念ながら、これは単純な解決策のない非常に単純な問題です。

よく考えてみると、簡単な回避策が思いつくかもしれません。

于 2012-06-27T23:40:20.550 に答える