stackoverflow

https://stackoverflow.com/questions/44964494/bootstrap-navbar-3-level-menu-hover-issue

by princesodhi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-default" style="width:300px">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu 1 <span class="caret"></span>  </a>
      <ul class="dropdown-menu">
        <li><a href="SubMenu1.aspx">SubMenu 11</a></li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sub Menu 12<span class="caret"></span>  </a>
          <ul class="dropdown-menu">
            <li><a href="SubMenu121.aspx">Sub Menu 121</a></li>
            <li><a href="SubMenu122.aspx">Sub Menu 122</a></li>
          </ul>
        </li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sub Menu 13<span class="caret"></span>  </a>
          <ul class="dropdown-menu">
            <li><a href="SubMenu131.aspx">Sub Menu 131</a></li>
            <li><a href="SubMenu132.aspx">Sub Menu 132</a></li>
          </ul>
        </li>
        <li><a href="SubMenu14.aspx">Sub Menu 14</a></li>
        <li><a href="SubMenu15.aspx">Sub Menu 15 </a></li>
        <li><a href="SubMenu16.aspx">Sub Menu 16</a></li>
        <li><a href="SubMenu17.aspx">Sub Menu 17</a></li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu 2<span class="caret"></span>  </a>
      <ul class="dropdown-menu">
        <li><a href="SubMenu21.aspx">Sub Menu 21</a></li>
        <li><a href="SubMenu22.aspx">Sub...

CSS

.nav > li > a,
.dropdown-menu > li > a,
.nav .open > a {
  height: auto;
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 10px;
  text-decoration: none;
  color: #284e36;
  line-height: normal;
  background-color: transparent;
  border-bottom: 2px solid white;
}

.nav > li,
.dropdown-menu > li,
.nav .open {
  color: #284e36;
  border: none;
  background-color: #F9F9F9;
}

.nav > li > a:active,
.dropdown-menu > li > a:active,
.nav .open > a:active,
.nav > li > a:focus,
.dropdown-menu > li > a:focus,
.nav .open > a:focus {
  background-color: #CCCCCC;
  color: #001e06;
  border: none;
  border-bottom: 2px solid white;
  margin-left: 0;
}

.nav > li > a:hover,
.dropdown-menu > li > a:hover,
.nav .open > a:hover {
  background-color: #CCCCCC;
  color: #001e06;
  border: none;
  border-bottom: 2px solid white;
  margin-left: 0;
}

.navbar-inverse {
  background-color: white;
  border-color: white;
}

.navbar {
  border-radius: 0px;
}

.dropdown-menu {
  padding: 0;
}


/*https://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing*/

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}


/* For desktop and ipad */

@media all and (min-width: 768px) {
  .dropdown-menu {
    margin: 0;
    left: 100%;
    top: 0;
  }
  .nav > li > a,
  .dropdown-menu > li > a,
  .nav .open > a {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

@media all and (max-width: 767px) {
  .dropdown-menu {
    left: 20%;
    top: 90%;
    width: 100%;
    border: 1px solid white;
  }
}

JavaScript

$(document).ready(function() {

  $('li').mouseenter(function() {
    $(this).addClass('selected'); 
  }).mouseleave(function() {    $(this).removeClass('selected');
  });
  
});