个人中心
gpt4 book ai didi

css - 隐藏标题后面的子菜单

转载 作者：行者123 更新时间：2023-11-28 06:34:55 27 4
gpt4 key购买 nike

我正在尝试制作一个带有一级子菜单的简单顶级菜单。我想使用 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 会按高度垂直平移，这样当主菜单按钮悬停时，子菜单会向下滑动。但是，我似乎无法使子菜单位于整个标题的后面但出现在下面的内容之上。

最佳答案

这可能对您有所帮助。这可以通过多种方式完成。这是其中之一。如果您开始使用 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>

关于css - 隐藏标题后面的子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34762815/

27 4 0
文章推荐： javascript - 如何使用 jquery 将文本附加到输入值？
文章推荐： c++ - 错误 LNK2019 : unresolved external and LNK1120: 1 unresolved externals
文章推荐： javascript - IOS Safari 窗口在 touchstart 或 touchend 上打开
文章推荐： c++ - 优胜美地 g++ : error: unrecognized command line option '-Xarch_x86_64' 上的 capybara-webkit
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com