Создание подменю 3 уровня - PullRequest
Новая
       19

Создание подменю 3 уровня

0 голосов
/ 12 января 2019

Подменю идет вниз, несмотря на то, что рядом 

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

Здесь я могу создать подменю, но оно идет вниз. Я хочу меню в сторону. Пожалуйста, предложите, как это сделать.

1 Ответ

0 голосов
/ 12 января 2019

вы не указали некоторые свойства 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>
...