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 回答