Question

我正在创建导航菜单;这是HTML：

<nav class="main-nav">
    <ul>
        <li>
            <a href="" title="">ITEM 1-1</a>
            <ul>
                <li>
                    <a href="" title="">ITEM 2-1</a>
                    <ul>
                        <li><a href="" title="">ITEM 3-1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

这是css：

.main-nav li {
  position:relative;
  z-index:200;
}

.main-nav > ul > li > ul {
  position:absolute;
  z-index:100;
}

.main-nav > ul > li > ul > li > ul {
  position:absolute;
  z-index:50;
}

第一个子菜单（ul）应该在其父级和第二个子菜单下...我已经尝试z-index : -1;并且它可以工作，但它会破坏模板的其他部分。有position:absolute元素可以在其position:relative父元素下面吗？

我设置了一个小提琴：http://jsfiddle.net/4svujbj7/4/ 这是一张它应该是什么样子的照片： screenshot

Answer 1

我真的不知道这是否是您一直在寻找的答案......

尝试在CSS中更改此代码：

* {
padding:0;
margin:0;
list-style:none;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.main-nav-wrap{
  background-color:#fff;
  -webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);
     -moz-box-shadow:0 0 15px rgba(0,0,0,0.2);
          box-shadow:0 0 15px rgba(0,0,0,0.2);
}

.main-nav{
  height:60px;
  padding:0 10px;
}

.main-nav > ul > li {
  float:right;
  font:13px yekan;
  padding:9px 0px;
  height:60px;
  margin-left:-5px;
}

.main-nav > ul > li .icon {
  -webkit-transition: all 100ms ease-in-out;
     -moz-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
       -o-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
}

.main-nav > ul > li:hover{
  background-color:#EDEDED;
}

.main-nav > ul > li:hover .icon {
  visibility:hidden;
}

.main-nav > ul > li:first-child{
  font-size:16px;
  background: #4AC47B;
  margin-left:0px;
  background: -moz-linear-gradient(top, #4AC47B 50%, #3EB66E 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#4AC47B), color-stop(50%,#3EB66E));
  background: -webkit-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: -o-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: -ms-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: linear-gradient(to bottom, #4AC47B 50%,#3EB66E 50%);
}

.main-nav > ul > li:first-child .livicon {
  margin-left:4px;
}

.main-nav > ul > li > a{
  padding:9px 35px;
  float:right;
  color:#7f7f7f;
  height:100%;
}

.main-nav > ul > li:first-child > a{
  font-size:16px;
  padding:8px 33px;
  color:#fff;
}

.main-nav > ul > li:first-child .icon {
  display:none;
}

.main-nav ul li{
  position:relative;
    z-index:auto;
  -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
}

.main-nav ul li a{

}

.main-nav li ul{
  position:absolute;
  background-color:#fff;
  width:225px;
  visibility:hidden;
  -webkit-transition: all 150ms ease-in-out;
     -moz-transition: all 150ms ease-in-out;
      -ms-transition: all 150ms ease-in-out;
       -o-transition: all 150ms ease-in-out;
          transition: all 150ms ease-in-out;
  opacity:0;
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
     -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
          box-shadow:0 0 5px rgba(0,0,0,0.5);
}

.main-nav > ul > li > ul{
  top:60px;
  right:0px;
  z-index:auto;
  -webkit-transform:translateY(-100px);
     -moz-transform:translateY(-100px);
      -ms-transform:translateY(-100px);
       -o-transform:translateY(-100px);
          transform:translateY(-100px);
}

.main-nav ul  li:hover > ul {
  visibility:visible;
  opacity:1;
}

.main-nav > ul > li:hover > ul {
  -webkit-transform:translateY(0);
     -moz-transform:translateY(0);
      -ms-transform:translateY(0);
       -o-transform:translateY(0);
          transform:translateY(0); 
}

.main-nav > ul > li > ul > li > ul{
  top:0px;
  right:50px;
  top:35px;
  z-index:200;
}

.main-nav li ul li{
  border-bottom:1px solid #EBEBEB;
  font:11px tahoma;
  color:#6D6D6D;
  padding:10px 17px 10px 8px;
  -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
}

.main-nav li ul li:hover{
  background-color:#F7F7F7;
}

.main-nav li ul li:hover > a{
  color:#ED4848;
    z-index:auto;
}

.main-nav li ul li a{
  color:#6D6D6D;
}

希望它有用......：）

使位置：绝对div落后于其位置：相对父母

1 个答案: