Issue with bootstrap sub-menu hovering

Question

I am currently using a sub-menu implementation in twitter bootstrap. The lines of code are as follows -

<ul class="dropdown-menu toggle-drop-down">

 <li style="left: 100px; position: absolute; top: -18px;">
  <img src="@{'/public/images/modal_arrow.png'}">
 </li>

 <li>
  <a href="/editSystemNotification/${notification.id}">Edit</a>
 </li>                                                          

 <li class="dropdown-submenu">
  <a class="sendSettings" href="/editSystemNotification/${notification.id}">Send</a>
 </li>

</ul>

Javascript code: -

var subList = "<ul class=\"sublist-remove dropdown-menu\"><li><a tabindex='-1' href=\"#\"><i class=\"fa fa-mail-forward\"></i> Send Mail</a></li><li><a href=\"#\"><i class=\"fa fa-hand-o-up\"></i> Notify</a></li></ul>";
    $(".sendSettings").hover(function(e) {
            console.log("hello world");
            $('.sublist-remove').remove();
            e.stopPropagation();
            $(this).parent().append(subList);
        });

But when I am trying to hover on the submenu section, I can find the main dropdown element is being hovered on and hence its giving a flickering effect. And I am not able to click on the sub-menu.

Please help with the issue as in where have I gone wrong?

Answer 1

I suppose you are using Bootstrap 2? Submenus are removed in Bootstrap 3. An example of working submenus in Bootstrap 3 can be found at http://www.bootply.com/86684