title: Making a drop-down menu scrollable
body: <p>I am trying to implement a drop down menu in a HTML page using CSS and jquery. Here is a sample of the HTML and javascript code.</p>
  
  <pre><code>&lt;nav id="topNav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" title="Nav Link 1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" title="Nav Link 2"&gt;Menu 2&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 1"&gt;Sub Nav Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 2"&gt;Sub Nav Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 3"&gt;Sub Nav Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 4"&gt;Sub Nav Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#" title="Sub Nav Link 5"&gt;Sub Nav Link 5&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#" title="Nav Link 3"&gt;Menu 3&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the Javascript code:</p>
  
  <pre><code>var nav = $("#topNav");
  
  //add indicators and hovers to submenu parents
  nav.find("li").each(function() {
      if ($(this).find("ul").length &gt; 0) {
  
          $("&lt;span&gt;").text("^").appendTo($(this).children(":first"));
  
          //show subnav on hover
          $(this).click(function() {
              $(this).find("ul").stop(true, true).slideToggle();
          });
      }
  });
  </code></pre>
  
  <p>I will be adding content to menu programmatically, and I want the dropdown menus to be scrollable when the content of the dropdown menu gets too large. </p>
  
  <p>How can I do this?</p>