Сохраняйте фон в активном корневом меню с помощью Bootstrap 3

Question

У меня возникают проблемы с настройкой фона активного корневого меню.

Вскоре, когда я навешиваю «2-й уровень», корневое меню становится серым по умолчанию, и я не могу найти селектор, необходимый для его переопределения. У меня также возникают проблемы с уровнями 2 и 3, имеющими разные прокладки, и не могу найти селектор для этого. Пытай за стену кода.

JS-Fiddle:

http://jsfiddle.net/94r36b94/2/

HTML

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="root"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Level 1</a></li> 
      <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">Level 2</a> 
        </li> 
        <li class="dropdown-submenu"> <a href="#">More..</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Level 3</a> 
          </li> 
          <li><a href="#">Level 3</a> 
          </li> 
          <li class="dropdown-submenu"> <a href="#">More..</a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Level 4</a> 
            </li> 
            <li><a href="#">Level 4</a> 
            </li> 
            <li class="dropdown-submenu"> <a href="#">More..</a> 
             <ul class="dropdown-menu"> 
              <li><a href="#">Level 5</a> 
              </li> 
              <li><a href="#">Level 5</a> 
              </li> 
             </ul> 
            </li> 

           </ul> 
          </li> 

         </ul> 
        </li> 
        <li><a href="#">Level 2</a> 
        </li> 
        <li><a href="#">Level 2</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Level 1</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

CSS

/* MENU */ 
@media (min-width: 768px) { 

    body { 
     background: #000; 
    } 

    .dropdown-submenu { 
     position: relative; 
    } 

     .dropdown-submenu > .dropdown-menu { 
      top: -2%; 
      left: 99.5%; 
      margin: 0; 
      padding: 0; 
     } 

.dropdown-menu > li > a { 
     color: #fff; 
     font-size: 13px; 
     font-size: 1.3rem; 
     padding: 3px 15px 3px 13px; 
    } 

    .dropdown-menu { 
     border: 0; 
    } 

    .nav > li > a { 
     padding: 7px 25px; 
    } 

    .navbar { 
     border: 0; 
     min-height: inherit; 
     margin: 0 auto; 
    } 

    .navbar-default .navbar-nav > li > a { 
     color: #fff; 
    } 

    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
     font-size: 13px; 
     font-size: 1.3rem; 
     color: #000; 
    } 

    .navbar-default .navbar-nav > li:hover { 
     background: #fff; 
    } 

     .navbar-default .navbar-nav > li:hover > a { 
      color: #fff; 
     } 

    .navbar-default .navbar-toggle .icon-bar { 
     background-color: rgb(15, 52, 66); 
     background-color: rgba(15, 52, 66, 0.75); 
    } 

    .dropdown-menu { 
     border-radius: 0; 
    } 

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

    .dropdown-submenu > a:after { 
     display: block; 
     content: " "; 
     float: right; 
     width: 0; 
     height: 0; 
     border-color: transparent; 
     border-style: solid; 
     border-width: 5px 0 5px 5px; 
     border-left-color: #fff; 
     margin-top: 5px; 
     margin-right: 0; 
    } 

    .dropdown-submenu:active > a:after { 
     border-left-color: #fff; 
    } 

    .dropdown-submenu.pull-left { 
     float: none; 
    } 

     .dropdown-submenu.pull-left > .dropdown-menu { 
      left: -100%; 
      margin-left: 10px; 
     } 

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

    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus { 
     background-color: rgb(15, 52, 66); 
     background-color: rgba(15, 52, 66, 0.75); 
    } 

    .navbar-nav > li:hover > ul.dropdown-menu, 
    .navbar-nav > li:hover > ul.dropdown-menu > li.dropdown-submenu:hover > ul.dropdown-menu { 
     background-color: rgb(15, 52, 66); 
     background-color: rgba(15, 52, 66, 0.75); 
    } 

    .navbar-nav > li:hover ul li a:hover, 
    .navbar-nav > li.active ul li a:hover { 
     background-color: rgb(125, 178, 181); 
     background-color: rgba(125, 178, 181, 0.75); 
     border-color: #fff; 
     color: #fff; 
    } 

    .navbar-default .navbar-nav > li.active ul li a { 
    } 
} 

@media (max-width: 779px) { 

    body { 
     background: #000; 
    } 

    .navbar { 
     min-height: 20px; 
     margin-bottom: 0; 
    } 

    .nav-link { 
     width: 90%; 
     float: left; 
    } 

    .navbar-collapse { 
     box-shadow: none; 
    } 

    .navbar-default .navbar-toggle .icon-bar { 
     background-color: #fff; 
    } 

    .nav-toggle { 
     width: 10%; 
     float: right; 
    } 

    .navbar-default .navbar-collapse { 
     border: 0; 
    } 

    .navbar-default .navbar-toggle { 
     padding: 6px; 
     border-color: #fff; 
    } 

    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
     font-size: 13px; 
     font-size: 1.3rem; 
     color: #fff; 
    } 

    .navbar-nav { 
     margin-left: 0; 
     margin-right: 0; 
    } 

     .navbar-nav > li a { 
      font-size: 13px; 
      font-size: 1.3rem; 
      color: #fff; 
     } 

     .navbar-nav > li:hover ul li a:hover, 
     .navbar-nav > li.active ul li a:hover { 
      color: #fff; 
     } 

    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus { 
     color: #fff; 
    } 

    .navbar-default .navbar-nav > .active > a, 
    .navbar-default .navbar-nav > .active > a:hover, 
    .navbar-default .navbar-nav > .active > a:focus { 
     font-size: 13px; 
     font-size: 1.3rem; 
    } 

    .navbar-default .navbar-nav > .open > a, 
    .navbar-default .navbar-nav > .open > a:hover, 
    .navbar-default .navbar-nav > .open > a:focus { 
     font-size: 13px; 
     font-size: 1.3rem; 
     color: #fff; 
     background-color: rgba(15, 52, 66, 0.75); 
    } 

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
     background-color: rgba(15, 52, 66, 0.75); 
     color: #fff; 
    } 

    .dropdown-link-container { 
     padding: 5px 10px 5px 25px; 
    } 

     .dropdown-link-container .glyphicon { 
      position: relative; 
      right: 14px; 
     } 

    .navbar-default ul li ul li ul { 
     margin-left: 10px; 
    } 
} 

.navbar-default { 
    border: 0; 
    background: none; 
} 

.nav li { 
} 

.navbar-default ul li ul li { 
    border-right: 0; 
} 

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus { 
    background-color: rgb(15, 52, 66); 
    background-color: rgba(15, 52, 66, 0.75); 
} 

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #7db2b5; 
} 

.navbar-default .navbar-toggle { 
    border-color: none; 
} 

.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    padding: 0; 
} 

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > span > a { 
    color: #fff; 
    background: rgb(15, 52, 66); 
    background: rgba(15, 52, 66, 0.75); 
} 

/* END MENU */ 

Answer 1

Мне нужно было добавить этот javascript, чтобы добавить класс «open». И затем спроектируйте его.

<script type="text/javascript"> 
    $(function() { 
     $(".dropdown-submenu a").hover(function (e) { 
      $(this).closest('li').toggleClass('open') 
      e.stopPropagation(); 
     }) 
    }); 
</script>