title: CSS Vertical Menu Bar, Preventing the Sub menu from going past a certain height
body: <p>So i have a veritcal menu bar posited to the right of the page however I do not want the sub-menu to cross down onto the the main div (blue background).</p>
  
  <p>I have created a JS fiddle link to show this clearer: <a href="http://jsfiddle.net/uzeZ6/" rel="nofollow">http://jsfiddle.net/uzeZ6/</a></p>
  
  <p>currently the menu bar will overflow onto the main div. How do I stop this from happening?</p>
  
  <p>Thank You</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="top"&gt;
  &lt;div id="nav"&gt;
  &lt;ul&gt; 
  &lt;li&gt;&lt;a href "#"&gt;Test &lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;ul&gt; 
  &lt;li&gt;&lt;a href "#"&gt;Test &lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;ul&gt; 
  &lt;li&gt;&lt;a href "#"&gt;Test &lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;ul&gt; 
  &lt;li&gt;&lt;a href "#"&gt;Test &lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href "#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;div id ="main"&gt;text goes here
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@charset"utf-8";
  #top {
  background-color: #CCC;
  padding: 0px;
  height: 150px;
  width: 640px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;}
  #top #nav {
  margin: 0px;
  padding: 0px;
  }
  #top #nav ul {
  margin: 0px;
  padding: 0px;
  }
  #top #nav ul li {
  background-color: #666;
  float: left;
  position: relative;
  border: 1px solid #000;
  list-style-type: none;
  }
  #top #nav ul li:hover ul {
  visibility: visible;
  left: -152px;
  top: -1px;
  }
  #top #nav ul li a {
  font-size: 14px;
  color: #FFF;
  line-height: 30px;
  text-decoration: none;
  display: block;
  height: 30px;
  width: 150px;
  }
  #top #nav ul li ul {
  position: absolute;
  visibility: hidden;
  }
  #nav {
  background-color: #333;
  padding: 0px;
  float: right;
  height: 150px;
  width: 180px;
  }
  #main {
  height: 300px;
  width: 640px;
  background-color: #00F;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  }
  </code></pre>