Подменю с несколькими выпадающими списками не отображается правильно

Question

У меня есть многоуровневое раскрывающееся меню. Это выглядит как выпадающее меню внутри выпадающего меню. Когда я нажимаю раскрывающееся меню внутри, оно не отображается справа, оно открывается ниже menu.I хочу показать внутреннее выпадающее меню как правую сторону, как на лестничной площадке. Как решить эту проблему?

Мой код здесь

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">E-magazine 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="dropdown-submenu"> 
     <li><a href="../Home/Emag">Valarum Vinnarasu</a></li> 
     <li><a href="#">The Throne</a></li> 
     </li> 
    </ul> 
</li> 
<li><a href="../Home/childrenhome">Children Home</a></li> 
</ul> 
</li> 

Answer 1

У вас есть тег ошибки в коде, может быть его помощью. Покажите свой css, чтобы увидеть, как вы понимаете выпадение

<ul> 
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">E-magazine<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li class="dropdown-submenu"> 
     <ul> 
      <li><a href="../Home/Emag">Valarum Vinnarasu</a></li> 
      <li><a href="#">The Throne</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><a href="../Home/childrenhome">Children Home</a></li> 
</ul> 

Answer 2

Для этого вы можете использовать JavaScript.

Пример кода JavaScript:

function showNested(caller) { 
    var elem = caller; 
    var child = $(":first-child", elem); 
    if (child.is(":visible")) 
     child.hide(); 
    else 
     child.show(); 
} 

и HTML:

<ul> 
    <li>List item one</li> 
    <li><a href="#" id="elemId1" onclick="showNested(this);">List item two with subitems: 
     <ul id="innerList" style="display: none"> 
     <li>Subitem 1</li> 
     <li>Subitem 2</li> 
     </ul> 
    </a></li> 
    <li>Final list item</li> 
</ul> 

Как это работает: Он реагирует OnClick событие. Когда вы нажимаете элемент, функция showNested запускается и передается в качестве аргумента. он найдет первый дочерний элемент вызывающего абонента (внутренний список) и отобразит его. Когда вы нажмете его снова, он скроет его. Вы можете использовать эту функцию для нескольких вложенных списков. Вы можете использовать событие onmouseover.