使用bootstrap 3或css在懸停時側身下拉菜單？

Question

我正在尋找可以單擊的橫向下拉菜單。 將鼠標懸停在列表項上時，即表明該列表項具有任何嵌套的li項，它將顯示出來。 這是我當前的代碼。 您可以將其粘貼到http://www.bootply.com/中以查看其外觀。 目前非常糟糕。 它同時顯示所有內容。 甚至其中一個項目都隱藏在另一個列表項目的后面。 我試圖關注這篇文章。 但我無法正常工作。 我在HTML中使用bootstrap 3。 因此，如果有辦法使用bootstrap3做到這一點，那也可以。

這是我的html，最后帶有內聯CSS：

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="list-group">


              <li id="settings" class="list-group-item">toyota highlander 
              <ul id="test">

                <li><a href="/search/57/atlanta/">atlanta</a></li>

                <li><a href="/search/57/austin/">austin</a></li>

                <li><a href="/search/57/boston/">boston</a></li>

                <li><a href="/search/57/chicago/">chicago</a></li>

                <li><a href="/search/57/seattle/">seattle</a></li>

              </ul>
            </li>




            <li><a href="/search/56" class="list-group-item  ">honda fit </a></li>



              <li id="settings" class="list-group-item  ">ford explorer 
              <ul id="test">

                <li><a href="/search/54/raleigh/">raleigh</a></li>

                <li><a href="/search/54/sacramento/">sacramento</a></li>

                <li><a href="/search/54/sandiego/">sandiego</a></li>

                <li><a href="/search/54/seattle/">seattle</a></li>

              </ul>
            </li>



          </div>
        </div><!--/span-->
      </div><!--/row-->

<style>
  li#settings {
                  position:absolute;
                  overflow: visible;
                }

                li#settings:hover > ul {
                  cursor:pointer;
                  display:block;

                }
                ul#test {
                  display: none;
                  white-space: nowrap;
                  list-style: none;
                  position: absolute;
                  top:34px;
                }

            </style>

在此引導程序模板中，頁面右側有鏈接，當您將鼠標懸停在每個鏈接上時，我要在該鏈接中顯示li個項目。 如果沒有限制項，則鏈接本身將是可單擊的

編輯：

最新試用版：

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div class="btn-group-vertical">
            <div id="sidebar" class="sidebar-nav span3">
            <ul class="nav nav-tabs nav-stacked">
              <ul class="dropdown-menu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">  


              <li class="dropdown-submenu  active "> <a tabindex="-1" href="#">toyota highlander </a>
        <ul class="dropdown-menu">
                <li><a href="/search/57/atlanta/">atlanta</a></li>
                <li><a href="/search/57/austin/">austin</a></li>
                <li><a href="/search/57/boston/">boston</a></li>
                <li><a href="/search/57/chicago/">chicago</a></li>
                <li><a href="/search/57/seattle/">seattle</a></li>
        </ul>
      </li>
               <li class="nav-menu"><a href="/search/56" class=" ">honda fit </a></li>
              <li class="dropdown-submenu "> <a tabindex="-1" href="#">ford explorer </a>
        <ul class="dropdown-menu">
                <li><a href="/search/54/raleigh/">raleigh</a></li>
                <li><a href="/search/54/sacramento/">sacramento</a></li>
                <li><a href="/search/54/sandiego/">sandiego</a></li>
                <li><a href="/search/54/seattle/">seattle</a></li>
        </ul>
      </li>
          </ul>
        </ul>
      </div> 
          </div>
        </div>

Answer 1

更新 ：檢查此字段以獲取更新的答案。 這次我使用了Bootstrap 3 。

注意：我一直在搜索如何像子菜單一樣將箭頭向左移動，但找不到答案。 希望對您有所幫助。

我進行了研究，發現Bootstrap 3不再支持dropdown-submenu 。 請查看已接受的答案 。 它可能會幫助您。

這是您要嘗試做的嗎？

Bootstrap 3的下拉子菜單CSS：

.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: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:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu{float:none;}.dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.sidebar{float:right;margin-right:20px;}

Answer 2

您為什么不使用按鈕組？ 垂直變化與您正在執行的操作類似。

<div class="btn-group-vertical">

  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>