title: Drop down menu appears behind other content outside of a div
body: <p>I have created a navigation menu which uses javascript. I have drop down menus in parts of the  main menu but when I click on the arrow it only displays the drop down up to the end of the div (see image):</p>
  
  <p><img src="https://i.stack.imgur.com/DZYXs.jpg" alt="enter image description here"></p>
  
  <p>How can I get it so that the drop down appears on top. I have tried overflow: visible but this doesnt seem to work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="top_bar"&gt;
  &lt;div id="top_inner"&gt;
  &lt;div id="logo"&gt; &lt;a href="http://www.edosbornephotography.com"&gt;&lt;img src="images/logo.gif" alt="Ed Osborne" width="220" height="100" class="logo"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="nav"&gt;
  &lt;ul class = "menu" &gt;
              &lt;li&gt; &lt;a href = "#" &gt; Home &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt;&lt;a href = "#" &gt; Tutorials &lt;/a&gt;
          &lt;ul class = "submenu" &gt;
              &lt;li&gt; &lt;a href = "#" &gt; CSS &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href = "#"&gt; Javascript &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href = "#" &gt; jQuery &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href = "#"&gt; HTML &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href = "#" &gt; PHP &lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nav {
  margin: 0 auto;
  position: relative;
  padding-top: 85px;
  }
  
  ul.menu {
  list-style: none;
  padding: 0 22px;
  margin: 0;
  float: left;
  background: #222;
  font-size: 1.2em;
  background: url(../images/topnav_bg.gif) repeat-x;
  }
  
  ul.menu li {
  float: left;
  margin: 0;  
  padding: 0 15px 0 0;
  position: relative; 
  }
  
  ul.menu li ul.submenu {
  list-style: none;
  position: absolute; 
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border: 1px solid #111;
  }
  
  ul.menu li ul.submenu li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525; 
  border-bottom: 1px solid #444; 
  clear: both;
  width: 170px;
  }
  
  html ul.menu li ul.submenu li a {
  float: left;
  width: 145px;
  background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
  padding-left: 20px;
  }
  </code></pre>