在标题后面隐藏子菜单

问题描述：

我正在尝试使子菜单的一个级别具有简单的顶层菜单。我想用translate3d来动画他们，但我无法设法让他们坐在标题后面z-index。我使用的基础，所以头看起来有点像这样：在标题后面隐藏子菜单

#main-menu > li { 
 
    position: relative; 
 
} 
 

 
#main-menu ul { 
 
    position: absolute; 
 
    -webkit-transition: transform 400ms ease; (omitted other prefixes) 
 
    transform: translate3d(0,-100%,0); 
 
} 
 

 
#main-menu > li:hover ul { 
 
    transform: translate3d(0,0,0); 
 
}

<div id="header"> 
 
    <div class="row"> 
 
     <div class="large-3 small-12 columns"> 
 
      <a id="logo" href="/"></a> 
 
     </div> 
 
     <div class="large-9 small-12 columns"> 
 
      <nav> 
 
       <ul id="main-menu" class="menu"> 
 
        <li class="has-children"> 
 
         <a href="/foo">Foo</a> 
 
         <ul> 
 
          <li> 
 
           <a href="/foo/first">First Child</a> 
 
          </li> 
 
          <li> 
 
           <a href="/foo/second">Second Child</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</div>

因此，在正常状态下的子菜单#main-menu ul通过其高度垂直平移，使得当主菜单按钮子菜单向下滑动。但是，我似乎无法完成，因此子菜单位于整个标题的后面，但出现在以下内容的上方。

答

这可能对你有帮助。这可以通过几种方式来实现。这就是其中之一。如果你开始使用bootstrap.this解决方案，只需使用html，css和js.this即可轻松完成。给你。

<!DOCTYPE> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $("li.one").mouseenter(function(){ 
     $("div.submenu").fadeIn(500,function(){ 
      $(this).mouseleave(function(){ 
       $(this).fadeOut(500); 
      }); 
     }); 
    }); 
}); 

</script> 
<style type="text/css"> 
body{ 
    margin: 0; 
} 
    ul{ 
     background-color:black; 
    } 
    ul li{ 
     color: white; 
     list-style-type: none; 
     display:inline; 
     font-size:30px; 
     width:100px; 
     margin-left: 30px; 
     margin-right: 30px; 
    } 
    div.submenu li{ 
     list-style-type: none; 
     color: white; 
     font-size: 30px; 
     width:200px; 
     background-color: black; 
     text-align: center; 
     position: relative; 
     top:-15px; 
     left:550px; 


    } 
    div.submenu{ 
     display: none; 
    } 
</style> 

</head> 
<body> 

<div style="text-align:center;"> 
    <ul> 
    <li class="one">Basin &amp; Sinks</li> 
    <li>Bathroom Accessories</li> 
    <li>Showers </li> 
    <li>Toilets</li> 

    </ul> 
    <div class="submenu"> 
    <li>one</li> 
    <li>two</li> 
    </div> 
</div> 



</body> 
</html>

答

你需要设置你无论你的头或主菜单（取决于你要去的方式），绝对没有z-index的应用，然后再添加一个负的z-index绝对定位的子菜单。这会隐藏父元素后面的子菜单内容。

* { 
 
    margin:0; 
 
    padding:0: 
 
    } 
 
#header { 
 
    background: #f4f4f4; 
 
    border-bottom: 1px solid #e3e3e3; 
 

 
    height:60px; 
 
    position:relative; 
 
    } 
 

 
#main-menu { 
 
    position:absolute; 
 
    width:100%; 
 
    height:30px; 
 
    list-style:none; 
 
    } 
 

 
#main-menu li > a { 
 
    display:block; 
 
    text-decoration:none; 
 
    padding:1em 2em; 
 
    } 
 

 
#main-menu li.has-children ul { 
 
    position:absolute; 
 
    z-index:-1; 
 
    top:100%; 
 
    -webkit-transition: transform 400ms ease; 
 
    transform: translate3d(0,-100%,0); 
 
    background:#f4f4f4; 
 
    border:1px solid #e3e3e3; 
 
    padding:1em; 
 
    } 
 

 
#main-menu li:hover ul { 
 

 
    transform: translate3d(0,20%,0); 
 
    }

<div id="header"> 
 
    <div class="row"> 
 
     <div class="large-3 small-12 columns"> 
 
      <a id="logo" href="/"></a> 
 
     </div> 
 
     <div class="large-9 small-12 columns"> 
 
      <nav> 
 
       <ul id="main-menu" class="menu"> 
 
        <li class="has-children"> 
 
         <a href="/foo">Foo</a> 
 
         <ul> 
 
          <li> 
 
           <a href="/foo/first">First Child</a> 
 
          </li> 
 
          <li> 
 
           <a href="/foo/second">Second Child</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</div>

在标题后面隐藏子菜单

相关推荐