title: Adding scroll bar to dynamic ul li
body: <p>I searched through many posts and forum as i thought this might be a basic stuff but didnot find it so asking here,All i am trying to do is add scroll bar if the height is more than certain limit lets say if menu items are more than 3.</p>
  
  <p>I have created a jsfiddle <a href="http://jsfiddle.net/euSWB/" rel="noreferrer">http://jsfiddle.net/euSWB/</a></p>
  
  <p>If you are not able to access it then here is the HTML and CSS
  HTML</p>
  
  <pre><code>&lt;ul id="mnav"&gt;
  
  &lt;li&gt;&lt;a&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a&gt;&lt;b&gt;SQL Server vs Oracle&lt;/b&gt;&lt;/a&gt;
   &lt;ul&gt;
  
  &lt;li&gt;&lt;a&gt;Basic SQL : Declare variables and assign values&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a&gt;Basic SQL : Inner Join, Outer Join and Cross Join&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a&gt;Basic SQL : Padding and Trimming&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a&gt;Basic SQL : Union,Except/Minus,Intersect&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a style="border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;"&gt;Update from Select&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;SSIS&lt;/b&gt;&lt;/a&gt;
   &lt;ul&gt;
  &lt;li&gt;&lt;a&gt;Coalesce in SSIS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a &gt;Universal CSV Generator&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a &gt;Parsing a row into multiple in CSV&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;li&gt;&lt;a style="border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;" &gt;XML Task in SSIS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
   &lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#mnav {
  margin-left: -30px;
  margin-right: -30px;
  }
  #mnav li {
  float: left;
  list-style: none;
  }
  #mnav li a, #mnav li a:link, #mnav li a:visited {
  text-decoration: none;
  }
  #mnav li a:hover, #mnav li a:active {
  text-decoration: none;
  }
  #mnav li:hover, #mnav li.sfhover {
  position: static;
  }
  #mnav li ul {
  display: block;
  z-index: 9999;
  position: absolute;
  left: -999em;
  width: 400px;
  margin: 0px;
  border: 1px solid #ddd;
  }
  #mnav li:hover ul, #mnav li.sfhover ul {
  left: auto;
  }
  #mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
  display: block;
  margin: 0;
  text-decoration: none;
  z-index: 9999;
  border-bottom: 1px dotted #ccc;
  width: 500px;
  }
  #mnav li ul li a:hover, #mnav li ul li a:active {
  display: block;
  margin: 0;
  text-decoration: none;
  }
  </code></pre>