Bootstrap collapse menu to vertical

Question

I am new to bootstrap and i can't figure out how to collapse my multi level horizontal menu to a standard vertical bootstrap menu. Been searching and trying for the last few hours now and only resulted in some weird menu "art" misplacement.

Here is my menu HTML

<ul id="nav">
   <li value="1"><a href="#">Home</a></li>
   <li value="2">
      <a href="#">Portfolio</a>
      <ul class='subs'>
         <li value="5"><a href="#">Web Design</a></li>
         <li value="6"><a href="#">Graphic Design</a></li>
         <li value="7"><a href="#">Logo Design</a></li>
         <li value="8"><a href="#">Blog Design</a></li>
         <li value="17"><a href="#">Apple</a></li>
         <li value="18"><a href="#">Banana</a></li>
      </ul>
   </li>
   <li value="3">
      <a href="#">Projects</a>
      <ul class='subs'>
         <li value="9"><a href="#">Project1</a></li>
         <li value="10"><a href="#">Project2</a></li>
         <li value="11"><a href="#">Project3</a></li>
         <li value="12"><a href="#">Project4</a></li>
      </ul>
   </li>
   <li value="4">
      <a href="#">Contact</a>
      <ul class='subs'>
         <li value="13"><a href="#">Support</a></li>
         <li value="14"><a href="#">Quote</a></li>
         <li value="15"><a href="#">General Inquiry</a></li>
      </ul>
   </li>
   <li value="16"><a href="#">kaas</a></li>
</ul>

I dont think its needed, but here is my CSS

#nav span {
    display: none;
}

#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    z-index: 99;
}

#nav {
    color-stop(0, #E3E3E3),
    color-stop(0.5, white)

    background-image: -o-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: -moz-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: -webkit-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: -ms-linear-gradient(bottom, #E3E3E3 0%, white 100%);
    background-image: linear-gradient(to bottom, #E3E3E3 0%, white 100%);

    border-bottom: 5px solid #333333;
    float: left;
    position: relative;
    width: 100%;
}

#nav ul.subs {
    color-stop(0, #E3E3E3),
    color-stop(0.5, white)

    background-color: -o-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: -moz-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: -webkit-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: -ms-linear-gradient(bottom, white 0%, #E3E3E3 100%);
    background-image: linear-gradient(to bottom, white 0%, #E3E3E3 100%);

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 1.5%;
    position: absolute;
    top: 54px;
    width: 96%;
}

#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}

#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}

#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}

#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}

#nav ul li a {
    color: #777777;
    margin-left: 5%;
    padding: 0;
}

#nav ul li a:hover{
    color: #F55856;
    padding-left: 15px;

    -moz-transition: padding 300ms ease-out 0s;
    -ms-transition: padding 300ms ease-out 0s;
    -o-transition: padding 300ms ease-out 0s;
    -webkit-transition: padding 300ms ease-out 0s;
    transition: padding 300ms ease-out 0s;
}

I am not asking for somebody who just edits my code so it works, though i would mind and really appreciate it. But i want to learn how, like tutorials, explanations, links. I tried several tutorials and other "usefull" information but as you can see i didnt get any further.

Answer 1

I believe you are looking for something similar to this:

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default dd"><a href="#">Home</a>
    </button>
    <div class="btn-group">
        <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">Portfolio <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li value="5"><a href="#">Web Design</a>
            </li>
            <li value="6"><a href="#">Graphic Design</a>
            </li>
            <li value="7"><a href="#">Logo Design</a>
            </li>
            <li value="8"><a href="#">Blog Design</a>
            </li>
            <li value="17"><a href="#">Apple</a>
            </li>
            <li value="18"><a href="#">Banana</a>
            </li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">Projects <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li value="9"><a href="#">Project1</a>
            </li>
            <li value="10"><a href="#">Project2</a>
            </li>
            <li value="11"><a href="#">Project3</a>
            </li>
            <li value="12"><a href="#">Project4</a>
            </li>
        </ul>
    </div>
    <div class="btn-group b">
        <button type="button" class="btn btn-default dropdown-toggle aa" data-toggle="dropdown">Contacts <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li value="13"><a href="#">Support</a>
            </li>
            <li value="14"><a href="#">Quote</a>
            </li>
            <li value="15"><a href="#">General Inquiry</a>
            </li>
        </ul>
    </div>
    <button type="button" class="btn btn-default"><a href="#">kaas</a>
    </button>
</div>

I really re-defined your entire set of code to fit the BootStrap standard, which, I used their website as a guide . You'll probably want to change any HTML/CSS as you see fit but in all reality, this is your website but with a vertical menu bar.

DEMO JSFiddle