title: CSS Dropdown menu not falling under parent menu
body: <p>I was just having a small problem and I'm not sure how to fix it.  I'm still new to HTML and CSS and I was trying to get the drop down menu to work, but after looking at various tutorials I can only get it so when I hover over the parent folder the sub menu falls either to the left or right and not underneath the parent.  </p>
  
  <pre><code>&lt;ul id="navigate"&gt;
      &lt;li class="current"&gt; &lt;a href = "index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href = ".html" &gt;A&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href = ".html"&gt;B &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt; &lt;a href = ".html"&gt;C&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href = ".html"&gt;D&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href = ".html"&gt;E&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href = ".html"&gt;F&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Above is the portion of the code for my nav bar. html have files to them</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>/*
   * Navigation Bar
   */
  #navigate
  {
      padding: 0;
      margin-top: 5px;
      list-style-type: none;
      color: black;
      float:left;
      width: 100%;
      background-color: #00FF00;
  }
  
  #navigate li
  {
      display: inline;
      position: relative;
  }
  
  #navigate li a 
  {
      float: left;
      width: 7em;
      background-color: #00FF00;
      text-decoration: none;
      border-right: 1px solid #FFFFFF;
      padding-left: 1em;
      padding-right: 1em;
      text-align: center;
  }
  
  #navigate li a:hover
  {
      background-color: #D1E751;
      color: #26ADEA;
  }
  
  #navigate li.current a
  {
      background:#D1E751;
  }
  
  /*
   * SubMenu 
   */
  #navigate li ul
  {
      display: none;
      position: absolute;
      padding: 0;
  }
  
  
  #navigate li:hover ul
  {
      display: inline-block;
  }
  </code></pre>
  
  <p>Currently the code works in that it shows the submenu to the right of the parent menu.  I'm not sure how to get it to fall directly below the parent menu, any help would be greatly appreciated.  Or any tips if my code looks a little odd this is my first semester in HTML, CSS and programming in general.
  Shows up like this (just showing the one menu</p>
  
  <pre><code>  parent       sub
  ----------------------------------
      A     |       B       |
  ----------------------------------
  
  I would like it to look like this
  ------------
      A      | Parent
  ------------
      B      | sub
  ------------
  </code></pre>
  
  <p>Thanks in advance</p>
  
  <p>------------------------------  UPDATE 5/9/2014 ----------------</p>
  
  <p>So now I've managed to get it to work, but when it shows up it moves the content....</p>
  
  <pre><code>------------
      A      | Parent
  ------------
  contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  ------------
      A      | Parent
  ------------
      B      | sub contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  ------------
  contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
  </code></pre>
  
  <p>i'm thinking it might have to do with the float:left and where I've cleared the float or the positioning.  When I add a position: absolute it just moves the sub menu over the parent menu though.</p>
  
  <p>Updated Code</p>
  
  <pre><code>/*
   * Navigation Bar
   */
  #navigate
  {
  padding: 0;
  margin-top: 5px;
  list-style-type: none;
  color: black;
  width: 100%;
  background-color: #00FF00;
  position: relative;
  }
  
  #navigate li
  {
  float: left;
  padding-right: 2px;
  }
  
  #navigate li a 
  {
  float: left;
  width: 7em;
  background-color: #32CD32;
  text-decoration: none;
  text-align: center;
  border-radius: 25px;
  padding: 5px;
  margin: auto;
  }
  
  #navigate li a:hover
  {
  background-color: #D1E751;
  color: #26ADEA;
  }
  
  #navigate li.current a
  {
  background:#D1E751;
  }
  
  /*
   * SubMenu 
   */
  
   #navigate ul
   {
      display: none;
      list-style: none;
      padding: 0;
   }
  
   #navigate ul li
   {
      clear: left;
      display: block;
   }
  
  
   #navigate li:hover ul 
   {
      display: block;
   }
  </code></pre>
  
  <p>Thanks in advance.</p>
  
  <p>--------Update few mins later >.&lt; -------</p>
  
  <p>I ended up putting it all in a div and formatting the div now it works.</p>
  
  <pre><code>/*
   * Navigation Bar
   */
  #navigate
  {
  padding: 0;
  margin-top: 5px;
  list-style-type: none;
  color: black;
  width: 100%;
  background-color: #00FF00;
  position: relative;
  }
  
  #navigate li
  {
  float: left;
  padding-right: 2px;
  }
  
  #navigate li a 
  {
  float: left;
  width: 7em;
  background-color: #32CD32;
  text-decoration: none;
  text-align: center;
  border-radius: 25px;
  padding: 5px;
  margin: auto;
  }
  
  #navigate li a:hover
  {
  background-color: #D1E751;
  color: #26ADEA;
  }
  
  #navigate li.current a
  {
  background:#D1E751;
  }
  
  /*
   * SubMenu 
   */
  
   #navigate ul
   {
      display: none;
      list-style: none;
      padding: 0;
   }
  
   #navigate ul li
   {
      clear: left;
      display: block;
   }
  
  
   #navigate li:hover ul 
   {
      display: block;
   }
  
  .nav
  {
      position: absolute;
      z-index: 2; 
      margin: auto;
  }
  </code></pre>
  
  <p>changes made to html just enclosed in  </p>