Я помещаю все это здесь, чтобы было легче читать. Ответы на оба ваших вопроса:)
HTML (обратите внимание, что я выделил первый список так, чтобы в нем было 3 li-s вместо 1):
<body>
<header>
<div class="container">
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header navbar-right">
<a class = "navbar-brand" href = "#">My LINUX distros</a>
</div>
<div class="nav navbar-nav">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
My favorite Linux distros...
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">RPM-based <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Mandrake Linux</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Fedora-based <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Yellow Dog Linux</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Debian-based <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Ubuntu</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Ubuntu flavors <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Lubuntu</a></li>
<li><a href="#">Xubuntu</a></li>
<li><a href="#">Kubuntu</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Others <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Slackware</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
</body>
CSS (позиция: абсолютно необходимна дочернем элементе):
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
margin-top: -1px;
}
jQuery:
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu ul').not(this.closest('ul')).hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});