WordPress Bootstrap多級垂直菜單

Question

我正在基於兩列引導的WordPress主題，我想要實現多級垂直菜單..嘗試了幾個小時後不知何故，我已經取得了成功創建HTML/CSS中響應多級垂直菜單，我爲此已經分享了下面的代碼。我想在WordPress導航菜單中實現它。我面臨的問題是子菜單與底層的父菜單鏈接重疊，而不是像我創建和添加的HTML代碼一樣工作。我知道我需要與我嘗試過的navwalker合作，但無法取得成功。您能否告訴我如何在WordPress導航菜單中實現與給定代碼相同的菜單功能？

<div class="container"> 
<div class="row"> 
<div class="col-sm-3"> 
    <div class="site-logo hidden-xs"><h2>Company Logo</h2></div> 
<div class="sidebar-nav"> 
    <div class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <span class="visible-xs navbar-brand">Company Logo</span> 
    </div> 
    <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Menu Item 1</a></li> 
     <li><a href="#">Menu Item 2</a></li> 
     <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Dropdown <span class="pull-right"><b class="caret"></b></span></a> 
     <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">   
      <li><a href="#">Action</a></li> 
      <li><a href="#" id="btn-2" data-toggle="collapse" data-target="#submenu2" aria-expanded="false">Sub-Dropdown <span class="pull-right"><b class="caret"></b></span></a> 
      <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2">   
      <li><a href="#">Submenu 1</a></li> 
      <li><a href="#">Submenu 2</a></li></ul> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu Item 4</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
    </div> 
    </div> 
    <div class="col-sm-9"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </p> 
</div> 
</div> 
</div> 

JSFIDDEL

Answer 1

您可以從導航欄引導花車移除，並在下拉菜單中設置position: static，加上其他一些造型調整達到所需的菜單。

然後，你必須做一些JavaScript來使嵌套的下拉菜單工作。

這是JSFiddle。

JavaScript由W3Schools snippet提供。