隐藏标题后面的子菜单答案

【问题标题】：Hide submenu behind header隐藏标题后面的子菜单
【发布时间】：2016-10-24 05:01:46
【问题描述】：

我正在尝试制作一个带有一级子菜单的简单顶部菜单。我想用translate3d 为它们制作动画，但我无法用z-index 让它们坐在标题后面。我用的是Foundation，所以头部看起来有点像这样：

#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 会垂直平移它们的高度，因此当主菜单按钮悬停时，子菜单会向下滑动。但是，我似乎无法让子菜单位于整个标题的后面，但出现在下面的内容之上。

【问题讨论】：

标签： css menu z-index translate-animation

【解决方案1】：

这可能对您有所帮助。这可以通过多种方式实现。这就是其中之一。如果您开始使用 bootstrap，您可以轻松地做到这一点。这个解决方案只使用 html、css 和 js。这可能是一个快速的帮助你。

<!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>

【讨论】：

【解决方案2】：

您需要将标题或主菜单（取决于您要使用的样式）设置为绝对而不应用 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>

【讨论】：