Html 第二级垂直菜单在悬停时消失
我有多级垂直菜单，当我尝试进入第二级时，第二级菜单消失。（一些旧版本的浏览器它工作正常） 而且二级菜单的高度也不等于一级菜单的高度 我已将现有代码粘贴到 虽然代码在codepen上不起作用，但您可以将html、css复制到单独的文件中Html 第二级垂直菜单在悬停时消失,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有多级垂直菜单，当我尝试进入第二级时，第二级菜单消失。（一些旧版本的浏览器它工作正常） 而且二级菜单的高度也不等于一级菜单的高度 我已将现有代码粘贴到 虽然代码在codepen上不起作用，但您可以将html、css复制到单独的文件中 <!DOCTYPE html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.m
<!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>
内森·史密斯
- 我的账户
- 注销
- 添加优惠
旅行者号
zxczxczx
-
-
-
平台
托管基金
财富保护
上市证券
财富保护
上市证券
上市证券
-
-
$（'.child'）.hide（）//默认情况下隐藏子对象
$（'.parent'）.children（）。单击（函数（）{
if（event.preventDefault）event.preventDefault（）
else event.returnValue=false；
$（this）.children（'.child'）.slideToggle（'slow'）；
$（this.find（'span'）.toggle（）；
});
左边距：25px来自。下拉子菜单>。下拉菜单
它会消失，因为当您尝试将鼠标悬停到第二个菜单时，您会进入该边距，因此您会保留保持悬停状态的初始元素。使用填充
使用开发人员工具（右键单击>检查）检查图元，以便更好地直观地查看图元周围的区域。谢谢，它已修复，高度问题怎么办？第二级菜单的高度与第一级菜单的高度不同。请参阅随附的模型