使用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项目.如果没有li-items,则链接本身将是可点击的

编辑:

最新的试用版:

<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

更新:检查此FIDDLE以获取我的更新答案.这次我使用了Bootstrap 3.

注意:我正在搜索如何将箭头向左移动,如子菜单,但我找不到答案.我希望这仍然有帮助.

我研究并发现dropdown-submenuBootstrap 3不再支持.请参阅接受的答案.它可能对你有帮助.

是本什么你想干什么？

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;}