javascript - Dropdown inside Left Navigation menu doesn't open -

i'm having issues drop-down menu put inside navigation menu. problems are:

1. menu doesn't open @ all

2. drop down menu's should open right not bottom (like picture)

3. links selected should change depending on selection default should option a, can click on dropdown option b, or c, etc.

bonus drop down links should act tabs , change links under picture:

i've been looking on place figure out how create dropdown menu 1 pictured above, can't seem find answer. i'm still new bootstrap, , appreciate advice on how can done thank you!

the fiddle: https://jsfiddle.net/f4e42hex/2/

html:

          <div id="sidebar-wrapper2">           <!-- sidebar -->         <div class="topfilter"> <input type="checkbox" style="vertical-align:middle;">   <div class="bs-example">  <div class="dropdown">         <a href="#" class="dropdown-toggle" data-toggle="dropdown">option 1 <b class="caret"></b></a>         <ul class="dropdown-menu">             <li><a href="#">option 2</a></li>             <li><a href="#">option 3</a></li>             <li><a href="#">option 4</a></li>              <li><a href="#">option 5</a></li>               <li><a href="#">option 6</a></li>           </ul>     </div>   </div>    </div>    </div>     <div id="sidebar-wrapper">       <ul class="sidebar-nav">         <li>         <a href="#/content">         option 1 -         </a>       </li>               <li>         <a href="#/topics">          option 1 - b         </a>       </li>               <li>         <a href="#">         option 1 - c         </a>       </li>               <li>         <a href="#">          option 1 - d         </a>       </li>       <li>         <a href="#"> option 1 - e</a>       </li>       <li>         <a href="#"> option 1 - f</a>       </li>       <li>         <a href="#"> option 1 - g</a>       </li>       <li>         <a href="#"> option 1 - h</a>       </li>       <li>         <a href="#"> option 1 - i/a>       </li>       <li>         <a href="#"> option 1 - j/a>       </li>       <li>         <a href="#"> option 1 - k</a>       </li>          <div class="bottomfilter">     </div>      </ul>   </div>   <!-- /#sidebar-wrapper -->      <div class="content" style="min-height:90%; background:white;"  >      </div>   <div class="push"></div>  <footer class="footer">                </footer> 

css:

a {outline:none !important;}  html, body, .wrap {   height: 100%; }  .wrap {   box-sizing: border-box; }  form {   height: 100% }  .wrap {   min-height: 100%;   height: auto !important;   height: 100%;   margin-bottom: -60px;   /* sticky footer not go below page */   /* sticky header not overlap content */ }  .push, .footer {   height: 60px; }    .footer {   background-color: #ebebeb;   height: 60px;   width: 100%;   position: fixed;   bottom: 0;    }  .content {   position: absolute;   width: 100%;   top: 120px;   background-color: yellow;   z-index: 0; }   #sidebar-wrapper {   z-index: 1000;   position: fixed;   left: 142px; height:95%;   width: 0; bottom:0; top:50px;   height:auto; border-top:2px solid #666;   margin-left: -142px;   overflow-y: auto; overflow-x:hidden;   background: #eee;   -webkit-transition: 0.5s ease;   -moz-transition: 0.5s ease;   -o-transition: 0.5s ease;   transition: 0.5s ease; }  #sidebar-wrapper2 {   z-index: 1000;   position: fixed;   left: 142px;   top:0;    margin-bottom: 0px;   width:100%;   min-height:55px;  height:auto;    margin-left: -142px;   background: #eee;    -webkit-transition: 0.5s ease;   -moz-transition: 0.5s ease;   -o-transition: 0.5s ease;   transition: 0.5s ease; }  .filtertitle { position:relative; display:inline-block; color:#000; width:auto; text-indent:10px;  }  .topfilter { max-width:100%; vertical-align:middle;  position:fixed; display:block; text-align:left; background-color:#eee; }   .bottomfilter {border-top: solid #666 1px; width:100%; height:auto;  position:relative; display:block; text-align:left; background-color:#eee;  }   #wrapper.toggled #sidebar-wrapper {   width: 200px;   }  #wrapper.toggled #sidebar-wrapper2 {   width: 200px;   }   #page-content-wrapper {   width: 100%;   position: absolute;   padding: 15px; }     #wrapper.toggled #page-content-wrapper {   position: absolute;   margin-right: -200px; }   /* sidebar styles */  .sidebar-nav {   position: absolute;   top: 0px;   width:inherit; min-width:100%;     margin: 0;   padding: 0;     list-style: none; }  .sidebar-nav li {   text-indent: 20px;   line-height: 40px;  }  .sidebar-nav li {   display: block;    text-decoration: none;   color: #999999; }  .sidebar-nav li a:hover {   text-decoration: none;   color: #333;    background: rgba(255, 255, 255, 0.6); }  .sidebar-nav li a:active, .sidebar-nav li a:focus {   text-decoration: none; }  .sidebar-nav > .sidebar-brand {   height: 65px;   font-size: 18px;   line-height: 60px; }  .sidebar-nav > .sidebar-brand {   color: #999999; }  .sidebar-nav > .sidebar-brand a:hover {   color: #fff;   background: none; }  @media screen , (min-width:768px) {   #wrapper {     padding-left: 300px;   }   #wrapper.toggled {     padding-left: 0;   }     #wrapper.toggled #sidebar-wrapper {     width: 0;   }   #page-content-wrapper {     padding: 20px;     position: relative;   }   #wrapper.toggled #page-content-wrapper {     position: relative;     margin-right: 0;   } }   @media screen , (max-width:1526px) {    .content,   .footer {     width: 82%;     right: 0;    }   .header {width:82%;}      #sidebar-wrapper {     width: 18%;    }     #sidebar-wrapper2 {     width: 18%;    }  }   @media screen , (max-width:1059px) {    .content,   .footer {     width: 80%;     right: 0;    }    .header {width:80%;}      #sidebar-wrapper {     width: 20%;    }       #sidebar-wrapper2 {     width: 20%;    } }          @media screen , (min-width:1527px) {    .content,   .footer {     width: 85%;     right: 0;    }   .header {width:85%;}     #sidebar-wrapper {     width: 15%;    }       #sidebar-wrapper2 {     width: 15%;    }   }          @media screen , (max-width:991px) {           .content,   .footer {     width: 100%;     right: 0;    }    .filtertitle {display:none;}      #sidebar-wrapper {     width:0;      }      #sidebar-wrapper2 {     width:0;      }