我需要用於引導的多級移動導航欄，無需懸停

Question

我陷入困境並感到沮喪。 我需要一個沒有懸停的移動引導菜單。 我需要沒有任何jquery或javascript。 我有幾個例子，但沒有一個在做。 這個Codepen是最接近的，但是它使用了一些jquery，而jquery無法在愚蠢的sparkpay網站上運行，而Im試圖使此菜單正常運行。

codepen： http ://codepen.io/iamgonge/pen/VpzMXL jquery：

(function($){
    $(document).ready(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);

CSS：

 .top{height: 150px;}.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;}


.navbar{background-color: #4F96BA;}

HTML：

<header class="top"></header>
<div id="nav">
   <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
         <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="#" target="_blank">LOGO</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Software <b class="caret"></b></a>
               <ul class="dropdown-menu">
                  <li class="dropdown dropdown-submenu">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office</a>
                     <ul class="dropdown-menu">
                        <li class="dropdown dropdown-submenu">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office 2016</a>
                           <ul class="dropdown-menu">
                              <li>
                                 <a href="/office-2016-home-business.aspx">Office 2016 Home & Business</a>
                              </li>
                              <li>
                                 <a href="/office-2016-home-student.aspx">Office 2016 Home & Student</a>
                              </li>
                              <li>
                                 <a href="/office-2016-mac.aspx">Office 2016 MAC</a>
                              </li>
                              <li>
                                 <a href="/office-2016-pro-plus.aspx">Office 2016 Pro Plus</a>
                              </li>
                              <li>
                                 <a href="/office-2016-professional.aspx">Office 2016 Professional</a>
                              </li>
                              <li>
                                 <a href="/office-2016-standard.aspx">Office 2016 Standard</a>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </li>
              </ul>

            </li><!--topend-->


         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </nav>
</div>
<!--nav-->



<div class="container">
   <div class="row">
      <h1>You Like It ?</h1>
      <br>
   </div>
</div>

Answer 1

我認為您可以拉近一個菜單，就像僅使用CSS一樣就是使用復選框hack。 這是一個簡單的演示，它說明了總體思路。

 label, a { color: #09c; text-decoration: underline; cursor: pointer; } ul ul,input { display: none; } input:checked ~ ul { display: block; } 

 <nav> <ul> <li> <a href="#">link</a> </li> <li> <input id="input" type="checkbox"> <label for="input">menu</label> <ul> <li> <a href="#">link</a> </li> <li> <input id="input2" type="checkbox"> <label for="input2">menu</label> <ul> <li> <a href="#">link</a> </li> <li> <input id="input3" type="checkbox"> <label for="input3">menu</label> <ul> <li> <a href="#">link</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">link</a> </li> </ul> </nav>