隐藏在 Nivo 滑块后面的 CSS 菜单栏

Question

我已经尝试了所有可以在 Google 上找到的解决方案，但不知何故，关于 z-index 的所有信息都不起作用 :(。这是我第一次使用这个网站，如果我的内容看起来很乱，请见谅.

问题1：https://www.dropbox.com/s/jr5wew27ydv7hcl/Screen%20Shot%202013-12-16%20at%2011.57.01%20pm.png

问题2：https://www.dropbox.com/s/7ffztfq7iezc4ao/Screen%20Shot%202013-12-16%20at%2011.57.50%20pm.png

我自己的 CSS 表格

    .header{
    width:960px;
    height:99px;
    font-family:'Francois One', sans-serif;
    text-transform:uppercase;
    z-index:9999px;}
    <!--this holds the css menu bar-->

    .banner, #slidermain {
    width:960px;
    height:328px;}
    <!--this holds the nivo slider-->

    .slidermain {
    background-color:#399;
    margin-bottom:10px;}

Nivo 滑块 CSS 表

/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    float:left;
    z-index:10px;

}

.nivoSlider img {
    position: relative;
    top:0px;
    left:0px;
    max-width: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}

如果 css 菜单位置设置为相对，它会起作用，但下拉菜单会向下推动 nivo 滑块以适应其大小，从而导致其他表格也向下移动。但是一旦鼠标离开菜单栏，nivo 滑块就会调整到原来的位置。

/* user menu settings */
.ddmenu { 
  display: block;
  padding:5px;
  text-align:center;
  width: 110px;
  margin: 0 auto;
  margin-top:45px;
  position: relative;
  cursor: pointer;
  background: #fff;
  font-size: 1.2em;
  color: #656565;
  font-weight: normal;
  float: left;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
.ddmenu:hover { color: #898989; }

.ddmenu.open {
  background: #5a90e0;
  color: #fff;
  border-left-color: #6c6d70;
  position:relative;
  z-index:200px;
}

.ddmenu ul { 
  position: relative;
  top: 100%;
  left: -1px; /* move content -1px because of container left border */
  width: 200px;
  z-index:200px;
  padding: 10px;
  display: none;
  border-left: 4px solid #8e9196;
  background: #fff;
  list-style:none;
  text-decoration:none;
  text-align:left;
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

非常感谢您提供的任何帮助！谢谢！

Answer 1

尝试对菜单第一级使用相对位置，并为菜单 2 级添加绝对位置，因此：'家、服务、事件、信息、关于我们、联系人'必须具有相对位置，对于另一个 ul，其中是：'关于sana，合作伙伴的定位绝对，一切都会好起来的。

Answer 2

您在 z-indexes 中添加了一个单位，但 z-index 属性不允许有单位： W3C: z-index

尝试从所有 z 索引中删除“px”，这应该可以解决您的问题。