CSS 导航选项卡显示在文本后面而不是前景中

Question

我有以下 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>

我遇到的问题是，当我将鼠标悬停在下拉选项卡上时——“客户列表”——它会显示在我页面上的图像和文本后面。我如何将它放在前面？

Answer 1

据我了解，您的菜单位于您页面上的图像和文本下方。并且您想在页面的所有内容上显示此菜单。

如果是这样，则从所有内容中为您的菜单提供更高的 z-index 值。

like: .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;   }

它将解决您的问题。

检查这个DEMO