个人中心
gpt4 book ai didi

html - 悬停时二级垂直菜单消失

转载 作者：行者123 更新时间：2023-11-28 01:31:52 25 4
gpt4 key购买 nike

我有多层垂直菜单，当我尝试转到二级菜单时，二级菜单消失了。(某些旧版本的浏览器工作正常)

并且二级菜单的高度也不等于一级菜单。我想要这样的东西

enter image description here

我已将我现有的代码粘贴到

http://codepen.io/anon/pen/Mwwdqd虽然代码在 codepen 上不起作用，但您可以将 html、css 复制到单独的文件中。

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<html lang="en">
<body>
<div id="wrapper">
<div class="main-content">

<div class="topnav">
<div class="account">
<ul><li>Nathan Smith</li>
</ul>
</div>

<div class="accountname">
<ul><li>My Account</li></ul>
</div>


<div class="logout">
<ul><li>Log Out</li></ul>
</div>

<div class="addtofav"><ul><li>Add to Favourties</li></ul></span></div>

<div class="name"><ul><li>Voyager</li></ul></span></div>


 <div>zxczxc czx</div> 


</div>
</div> 






<div class="sidebar">
<div class="left">
<div class="row col-xs-6 col-sm-3  col-md-2 logo">
<div class="imageinbottomtextontop">
<div class="titletextimage_image">
<a href="/content/count/en/default.html" target="_top">
<img title="COUNT" style="width:px; height:px;" src="images/logo.png" alt="COUNT">
</a>
</div>
</div>
</div>
</div>


<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

<div id="left-menu">

  <div>
            <ul class="nav nav-pills nav-stacked mn-vnavigation">

                <li class="dropdown-submenu active">
                    <a tabindex="-1" href="#">Client Advice</a>


                    <ul class="dropdown-menu">

                        <li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li class="dropdown-submenu"><a href="#">Strategy & Technical</a></li>
                        <li class="dropdown-submenu"><a href="#">Research</a></li>
                        <li class="dropdown-submenu active">
                            <a href="#">APL & Products</a>
                            <ul class="dropdown-menu parent last-level">
                                <li style=" border-bottom: 1px solid #ccc;">
                                    <a href="#">
                                        Approved Product List
                                        <span aria-hidden="true" class="glyphicon glyphicon-plus menu-align"></span>
                                        <span aria-hidden="true" class="glyphicon glyphicon-minus menu-align" style="display:none;"></span>
                                    </a>

                                    <ul class="child">
                                        <li style="padding:10px 15px;">Platforms</li>
                                        <li style="padding: 10px 15px;">Managed Funds</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Wealth Protection</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                        <li style="padding: 10px 15px;">Listed Securities</li>
                                    </ul>

                                </li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
                                <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu"><a href="#">Implementation</a></li>
                        <li class="dropdown-submenu"><a href="#">Review</a></li>
                        <li class="dropdown-submenu"><a href="#">Execution Only</a></li>
                    </ul>

                </li>
                <li class="dropdown-submenu menu-align"><a href="#" >Personal Development</a></li>
                <li class="dropdown-submenu menu-align "><a href="#" >Practice</a></li>
                <li class="dropdown-submenu menu-align "><a href="#" >News</a></li>
            </ul>
        </div>

</div>







</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>
        $('.child').hide(); //Hide children by default

        $('.parent').children().click(function () {
            if (event.preventDefault) event.preventDefault()
            else event.returnValue = false;
            $(this).children('.child').slideToggle('slow');
            $(this).find('span').toggle();
        });
    </script>
</body> 
</html>

最佳答案

删除 margin-left: 25px;来自 .dropdown-submenu > .dropdown-menu

它消失了，因为当您尝试将鼠标悬停在第二个菜单中时，您会遇到该边距，因此您离开了保持悬停状态的初始元素。使用 padding相反。

使用开发人员工具检查元素(右键单击 > 检查)以更好地直观地查看元素周围的区域。

关于html - 悬停时二级垂直菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30022568/

25 4 0
文章推荐： c++ - 为什么我在分析器中看到 __scalbnf？
文章推荐： c++ - zlib minizip 解压缩的可执行文件已损坏
文章推荐： c++ - 当 C++ 中的数组大小未知时，如何在运行时将对字符串数组的引用作为函数参数传递？
文章推荐： javascript - 在不同的 grunt 任务中使用特定的数据