Bootstrap 3 multi level menu - css

Question

I'm having problems adding a hover on the root menus. All submenus show when hovering the first one. And it gets buggy in less than 768px. How do I fix this so hover works on the root menus and the submenus shows when window is smaller?
http://jsfiddle.net/e2xEL/1/
HTML
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="root">
Multi Level <b class="caret"></b>
<ul class="dropdown-menu">
<li>Level 1</li>
<li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Level 2</a>
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 3
</li>
<li>Level 3
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 4
</li>
<li>Level 4
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 5
</li>
<li>Level 5
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
</li>
<li>Level 2
</li>
</ul>
</li>
<li>Level 1</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS:
.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 .pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.root:hover .dropdown-menu{
display: block;
}

Answer 1

Updated DEMO
just add > in between .root:hover .dropdown-menu{
.root:hover > .dropdown-menu{
display: block;
}