Question

子菜单并排出现

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

在这里，我可以创建子菜单，但是它很快就会出现。我要菜单在旁边。请提出如何做到这一点。

Answer 1

您没有提供某些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>

3级子菜单创建

1 个答案: