0

I am looking to have side-ways dropdown menu that could be clicked. Upon hovering over the list items, it that list items has any nested li items, it will show up. Here is my current code. you can paste it in http://www.bootply.com/ to see how it looks. It currently is very bad. it is displaying everything at the same time. and even one of the items is hidden behind another list item. I tried to follow this post. but I could not get it working. I am using bootstrap 3 in my HTML. so if there is a way to do it with bootstrap3 , that would be fine too.

Here is my html with inline css at the end:

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

In this bootstrap template, there are links on right side of page, as you hover over each link, I want to display li items with-in that link. if there are no li-items, the link itself will be clickable

EDIT:

latest trial here:

<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>
Community
  • 1
  • 1
eagertoLearn
  • 9,772
  • 23
  • 80
  • 122

2 Answers2

5

UPDATE: CHECK this FIDDLE for my updated answer. I've used Bootstrap 3 this time.

note: I was searching how to move the arrow to the left like the sub-menu but I can't find the answer. I hope this still helps.

I've research and found out the dropdown-submenu is not supported on Bootstrap 3 anymore. Please see the accepted answer. It might help you.

Is THIS what you are trying to do?

Dropdown submenu CSS for Bootstrap 3:

.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;}
Community
  • 1
  • 1
shin
  • 3,491
  • 1
  • 12
  • 17
  • no this is not what I am trying to do. I dont want navbar first of all. please see my edit above – eagertoLearn Apr 25 '14 at 01:39
  • I'm sorry I didn't realize you want a vertical menu. Please see my updated answer. – shin Apr 25 '14 at 02:27
  • somehow I cannot get it to work. can you please see edit above and point out the mistake? – eagertoLearn Apr 25 '14 at 05:27
  • Ive checked your code and it seems working. http://jsfiddle.net/programmer101/g4eVf/. – shin Apr 25 '14 at 05:39
  • did you make any changes at all? – eagertoLearn Apr 25 '14 at 05:48
  • nope. Is that how you want it? Check the 'external resources' on jsfiddle. – shin Apr 25 '14 at 05:53
  • somehow it is not working as part of my html. it seems fine in jsfiddle. how to trouble shoot? i spent a lot of time already... – eagertoLearn Apr 25 '14 at 06:36
  • hmm, i am using bootstrap 3. that is the problem i think. Any idea what changes are needed to work with bootstrap 3? – eagertoLearn Apr 25 '14 at 08:23
  • oh I see! i've done some research and found out that dropdown-submenu is not supported anymore in Bootstrap 3. Check my updated answer. I hope it helps. – shin Apr 25 '14 at 08:50
  • Thank you, this worked perfectly. I am going to accept your answer! one final touch though. I see a line just down of the dropdown box, how to remove it and how to change the dropdown to show up on left instead of right? Thanks again – eagertoLearn Apr 25 '14 at 18:04
  • I updated my bootply. You can use .pull-left or .pull-right class. – shin Apr 28 '14 at 01:05
  • I want the arrow to be left side so that dropdown will be opposite to what is currently in bootply. Also why did you remove ` – eagertoLearn Apr 28 '14 at 04:24
  • I was trying something and forgot to erase those, sorry. BTW check the updated fiddle. – shin Apr 28 '14 at 07:12
  • great. the dropdown appears on left which is very nice. how can you get the arrow to be on left side rather than right side (which it is currently in fiddle) – eagertoLearn Apr 28 '14 at 07:26
0

Why don't you use the Button Groups? The vertical variation looks similar to what you are doing.

<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>
Ricardo Nuñez
  • 989
  • 1
  • 13
  • 17