Question

我在div的末尾有一个css下拉菜单，我需要添加一个z-index，以便它显示在页面上的所有其他内容之上。下拉列表工作正常，但我不确定在哪里添加z-index。我在chrome的检查员中经历了很多次，我无法改变图层的顺序。

这是我的HTML：

 <div id="main_view_wrapper">
   <div id="main_view">
    <div class="show">
      <ul><li class="accept">Accept</li>
       <li class="decline">
       Decline
        <ul>
         <li class="topdropdown"><a href="#" class="decline><div class="textdrop">Drop down Menu 1</a></div></li>
         <li class="bottomdropdown"><a href="#" class="decline"><div class="textdrop">Drop down menu 2</div></a></li>
        </ul>
       </li>
      </ul>
    </div>
   </div>
  </div>

这是我的所有CSS：

#main_view_wrapper{
    width: 615px;
    height: 385px;
    background: #474747;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#main_view{
  width: 560px;
  height: 230px;
  float: left;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}


.show{
  width: 560px;
  height: auto;
  margin-bottom: 15px;
  color: #fff;
  font-style: arial;
  font-size: 12px;
  background-color: #404040;
  text-align: top;
  padding-top: 5px;
  vertical-align: top;

}

  ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 0 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;  
}

ul li.accept {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  position: relative;
  padding: 5px 15px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background: #ef8200;
  text-align: center;
  margin-top: 3px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-right: 10px;
}

ul li.decline {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  position: relative;
  padding: 5px 15px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background: #007fc2;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.textdrop{
  font-family: arial;
  font-size: 11px;
  text-decoration: none;
  background: #006699;
  padding: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

ul li:hover {
  background: #111;;
  color: #fff;

}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  visibility: hidden;
}
ul li ul li.dropdown { 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  background-color: #007fc2;
  left: -180px;
  width: 200px;
  margin-top: -20px;
  padding-bottom: 30px;
}
ul li ul li.dropdown a {  
  display: block; 
  color: #fff;
  font-family: arial;
  font-size: 11px;
  text-decoration: none;
}

ul li ul li.topdropdown {  
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  background-color: #007fc2;
  left: -180px;
  width: 200px;
  z-index: 1;
  margin-top: -20px;
  padding-bottom: 30px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
}
ul li ul li.topdropdown a { 
  display: block; 
  color: #fff;
  font-family: arial;
  font-size: 11px;
  text-decoration: none;
}
  ul li ul li:hover { 
  background: #888; 
  ul li:hover ul 
  display: block;
  visibility: visible;
}

ul li ul li.bottomdropdown {
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  background-color: #007fc2;
  left: -180px;
  width: 200px;
  margin-top: -20px;
  padding-bottom: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
ul li ul li.bottomdropdown a {  
  display: block; 
  color: #fff;
  font-family: verdana;
  font-size: 11px;
  text-decoration: none;
}

这是一张图片，显示菜单落在main_view DIV底部：

enter image description here

Answer 1

你有另一个带z-index的div？

另一个建议是，尝试<li class="decline">或甚至<div id="main_view">

中的z-index

尝试使用更大的z-index，例如z-index：100

Answer 2

你的问题根本没有z-index。您的下拉菜单设置为＆＃34;可见性：隐藏＆＃34;和＆＃34;显示：无＆＃34;但没有任何东西让它出现在悬停。你需要添加 -

ul li.decline:hover ul  { 
    display: block; 
}

并删除可见性属性，这是不必要的。这是一个小提琴：的 DEMO

将Z-Index添加到溢出容器中的下拉列表中

2 个答案: