Question

我试图用一个级别的子菜单制作一个简单的顶级菜单。我想使用translate3d为它们设置动画，但我无法让它们与z-index一起坐在标题后面。我使用的是基础，所以标题看起来有点像这样：

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

因此，在正常状态下，子菜单#main-menu ul按其高度垂直平移，以便在主菜单按钮悬停时子菜单向下滑动。但是，我似乎无法做到这一点，以便子菜单位于整个标题的后面，但显示在下面的内容之上。

Answer 1

这可能对你有所帮助。这可以通过多种方式实现。这是其中之一。如果你开始使用bootstrap，你可以很容易地做到这一点。这个解决方案只使用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>

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

隐藏标题后面的子菜单

2 个答案: