Multilevel bootstrap menu

gistfile1.html

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a href="#" class="brand">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle active" href="#">Go To <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="dropdown submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                    <ul class="dropdown-menu submenu-show submenu-hide">
                        <li class="dropdown submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
                             <ul class="dropdown-menu submenu-show submenu-hide">
                                    <li><a href="#">Level 1.1.1</a></li>
                                    <li><a href="#">Level 1.1.2</a></li>
                                    <li><a href="#">Level 1.1.3</a></li>
                                    <li><a href="#">Level 1.1.4</a></li>
                            </ul>
                        </li>
                        <li class="dropdown submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
                            <ul class="dropdown-menu submenu-show submenu-hide">
                                    <li><a href="#">Level 1.2.1</a></li>
                                    <li><a href="#">Level 1.2.2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Level 1.3</a></li>
                        <li><a href="#">Level 1.4</a></li>
                        <li><a href="#">Level 1.5</a></li>
                    </ul>
                </li>
                <li><a href="#">Other</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
  </div>
</div>

gistfile2.js

    jQuery('.submenu').hover(function () {
        jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
    }, function () {
        jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
    }).find("a:first").append(" » ");

gistfile3.css

.submenu-show
{
    border-radius: 3px;
    display: block;
    left: 100%;
    margin-top: -25px !important;
    moz-border-radius: 3px;
    position: absolute;
    webkit-border-radius: 3px;
}
.submenu-hide
{
    display: none !important;
    float: right;
    position: relative;
    top: auto;
}
.navbar .submenu-show:before
{
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .submenu-show:after
{
    border-bottom: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-top: 6px solid transparent;
    left: 10px;
    left: -6px;
    top: 11px;
}