Question

我希望有可以点击的旁路下拉菜单。将鼠标悬停在列表项上时，该列表项具有任何嵌套的li项，它将显示出来。这是我目前的代码。您可以将其粘贴到http://www.bootply.com/中以查看其外观。目前非常糟糕。它同时显示所有内容。甚至其中一个项目隐藏在另一个列表项目后面。我试图遵循这个post.，但我无法让它发挥作用。我在我的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>

在this引导程序模板中，页面右侧有链接，当您将鼠标悬停在每个链接上时，我想在该链接中显示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 。

注意：我正在搜索如何将箭头向左移动，就像子菜单一样，但我找不到答案。我希望这仍有帮助。

我研究并发现Bootstrap 3不再支持dropdown-submenu。请参阅accepted answer。它可能会对你有帮助。

THIS你想做什么？

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>

使用bootstrap 3或css悬停的侧面下拉菜单？

2 个答案: