Bootstrap Dropdown menu hover with levels

by Alexandru Gatea

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<legend>Ski Regions</legend>
<div class="row-fluid">
<ul class="nav nav-pills offset2">
    <li class="dropdown"> 
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Europe <b class="caret"></b></a>

        <ul class="dropdown-menu">
            <li><a href="Andorra">Andorra</a>
            </li>
            <li><a href="Austria">Austria</a>
            </li>
            <li><a href="Bulgaria">Bulgaria</a>
            </li>
            <li><a href="Finland">Finland</a>
            </li>
            <li><a href="France">France</a>
            </li>
            <li><a href="Italy">Italy</a>
            </li>
            <li><a href="Norway">Norway</a>
            </li>
            <li><a href="Sweden">Sweden</a>
            </li>
            <li><a href="Switzerland">Switzerland</a>
            </li>
           
</ul>
</li><!-- end eu -->
    
     <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">North America <b class="caret"></b></a>

        <ul class="dropdown-menu">
            <li><a href="USA">USA</a>
            </li>
            <li><a href="Canada">Canada</a>
            </li>
            
</ul>
</li><!-- end N USA -->
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">South America <b class="caret"></b></a>

        <ul class="dropdown-menu">
            <li><a href="Argentina">Argentina</a>
            </li>
            <li><a href="Chili">Chili</a>
            </li>
            
</ul>
</li><!-- end S USA -->
  
         <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Asia <b class="caret"></b></a>

        <ul
       ...

JavaScript

$(".resorts").hide();
$('.dropdown-menu li a').click(function(e) { 
  e.preventDefault();
     // e.stopPropagation();
$(".resorts").hide();
var clicked = $(this).text().toLowerCase().replace(/ /g, '-');
$(".resorts[id*="+clicked+"]").fadeIn(200);
});