CH4-8 三層選單

HTML

<div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav pull-right">

          <!--PRODUCTS-->
          <li class="dropdown">
                    <!--第一層-->
                    <a class="dropdown-toggle" data-toggle="dropdown">PRODUCTS
                    </a>
                        <ul class="dropdown-menu">
                        <!--第二層-->
                            <li class="dropdown dropdown-submenu">
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">LIGHTS</a>
                            <!--第三層-->
                                <ul class="dropdown-menu">
                                    <li><a href="">LIGHT BARS</a></li>
                                  <li><a href="">WORK LIGHT</a></li>
                                  <li><a href="">STROBE LIGHT <br>WARING LIGHT</a></li>
                                  <li><a href="">TRUCK AND TRAILER</a></li>
                                  <li><a href="">INTERIOR LIGHTS</a></li>
                                  <li><a href="">OTHERS</a></li>
                                </ul>
                            </li>
                         </ul>
          </li>
        </ul>
      </div>

CSS

.marginBottom-0 {margin-bottom:0;}
    .dropdown-submenu{position:relative;}
    .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
    .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:#cccccc;margin-top:5px;margin-right:-10px;}
    .dropdown-submenu:hover>a:after{border-left-color:#555;}
    .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

JS

(function($){
              $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                event.preventDefault(); 
                event.stopPropagation(); 
                $(this).parent().siblings().removeClass('open');
                $(this).parent().toggleClass('open');
              });
          })(jQuery);