title: CSS Dropdown Menu - List items not aligning correctly
body: <p>Check out the <a href="http://jsfiddle.net/UfpCm/" rel="nofollow">JSFiddel Here</a></p>
  
  <p>I have a CSS Based dropdown menu that drops down on hover but all lists displayed on hover are in the same location, not under the menu item they are associated with. I believe the problem lies with this part of the code...</p>
  
  <pre><code>#menu ul li {
  }
  </code></pre>
  
  <p>but even when I edit this and take away the float I can't seem to figure it out.  Maybe someone can point out the mistake I've made.  Thanks in advance for the help.</p>
  
  <p>CSS</p>
  
  <pre><code>#menu ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  }
  #menu li {
  display: inline;
  }
  #menu ul li {
  display: block;
  position: relative;
  float: left;
  }
  #menu li ul {
  display: none;
  }
  #menu ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #1e7c9a;
  margin-left: 1px;
  white-space: nowrap;
  }
  #menu ul li a:hover {
  background: #3b3b3b;
  }
  #menu li:hover ul {
  display: block;
  position: absolute;
  }
  #menu li:hover li {
  float: none;
  font-size: 11px;
  }
  #menu li:hover a { background: #3b3b3b; }
  #menu li:hover li a:hover {
  background: #1e7c9a;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Find Us&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Graphic Design&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Logo Design&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Blog Design&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Our Menu&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;This is a project&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;So is this&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;and this&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;don't forget this too&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Our Story&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Support&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Quote&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;General Enquiry&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>