1

私は次のcssコードを持っています:

#menu li { 
  float:left;
  position:relative;
  line-height: 3em;
  width: 10em; 
} 
#menu li ul {
  position:absolute;
  margin-top:0em;
  margin-left:.0em;
  display:none; 
}
#menu ul li ul {
  margin-top:0em;
  margin-left:0em;
} 
#menu a {
  display:block;
  border-right:1px solid #fff;
  background:#3B3B3B;
  color:#3B3B3B;
  text-decoration:none; 
  padding:0 0px;
  text-align:center;
  background: url(images/nav.gif) repeat-x 0 0;
  height: 50px;
  list-style-type: none;
}
#menu a:hover {
  background-color::#3B3B3B3;
  color:#fff;
  text-align:center;
  height: 50px;
  list-style-type: none;
}
#menu ul {
  border-top:1px solid #fff;
  float: right;
  list-style-type: none;
} 
#menu ul a {
  border-right:none;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  border-left:1px solid #fff;
  background:#fff;
  text-align:center;
  background: url(images/nav.gif) repeat-x 0 0;
  height: 50px;
} 
/* SHOW SUBMENU 1 */ 
#menu li:hover ul, #menu li.over ul { 
  display:block; 
  background:#fff;
}
#menu li:hover ul ul, #menu li.over ul ul { 
  display:none;
}
/* SHOW SUBMENU 2 */ 
#menu ul li:hover ul, #menu ul li.over ul {
  display:block; 
}

および次の HTML コード

<div class="shell">
  <div class="cl">&nbsp;</div>
  <ul id="menu">
    <li><a href="@Url.Content("~/Home/Index")">HOME</a></li>
    <li>
      <a href="#">CLIENTS</a>
      <ul>
        <li><a href="@Url.Content("~/Client/SearchClient")">CLIENT LIST</a></li>

私が抱えている問題は、マウスをドロップダウン タブ (「クライアント リスト」) の上に置くと、自分のページにある画像とテキストの後ろに表示されることです。前面に出すにはどうすればよいですか？

4

1 に答える 1

0

私が理解しているように、あなたのメニューはあなたのページに配置されている画像とテキストの下にあります。このメニューをページのすべてのコンテンツに表示したいとします。

もしそうなら、z-indexすべてのコンテンツからあなたのメニューにより高い価値を提供してください。

のように: .menutab { z-index : 1000;}.menutab は、メニュー要素にあるクラスです。

編集済み :この行を変更します

/* SHOW SUBMENU 1 */ #menu li:hover ul, #menu li.over ul 
{ display:block; background:#fff;}

に

/* SHOW SUBMENU 1 */ #menu li:hover ul, #menu li.over ul 
{ display:block; background:#fff; z-index:1000;   }

それはあなたの問題を解決します。

このデモをチェック

于 2012-08-28T09:20:49.507 に答える