时间戳

首页 > 解决方案 > 3级子菜单创建

html - 3级子菜单创建

问题描述

尽管并排，但子菜单仍在下降

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
nav.navbar-findcond ul.dropdown-menu { border: 0; background: #99e6e6; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc;}
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444; }
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; }
nav.navbar-findcond ul.dropdown-submenu >  { position: absolute;left: 180px;display: block;width: 180px;top: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar-findcond">
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="test" data-toggle="dropdown" role="button" aria-expanded="false"><b>LPJ</b> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><b>LPJ1</b></a></li>
<li><a href="#"><b>LPJ2</b></a></li>
<li><a href="#"><b>LPJ3</b></a></li>
</li>			
</ul>
</nav>

在这里，我可以创建子菜单，但它正在下降。我想要菜单在旁边。请建议如何做到这一点。

标签： htmlcssmenusubmenu

解决方案

你还没有给出一些 CSS 属性。我已经编辑了您的代码片段，请看一下。

$(document).ready(function(){
  $('.dropdown-menu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
nav.navbar-findcond ul.dropdown-menu { 
border: 0; background: #99e6e6; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc;width: 100px;}
nav.navbar-findcond ul.dropdown-menu > li { width: 100px;}
nav.navbar-findcond ul.dropdown-menu > li > a { color: #444;  position: relative;}
nav.navbar-findcond ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; }
nav.navbar-findcond ul.dropdown-submenu{ position: absolute;left: 100px;display: block;width: 180px;top: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar-findcond">
<ul class="dropdown-menu">
<li >
<a href="#" class="test" data-toggle="dropdown" role="button" aria-expanded="false"><b>LPJ</b> <span class="caret"></span></a>
<ul class="dropdown-submenu">
<li><a href="#"><b>LPJ1</b></a></li>
<li><a href="#"><b>LPJ2</b></a></li>
<li><a href="#"><b>LPJ3</b></a></li>
</li>			
</ul>
</nav>

推荐阅读