title: drop down menu positioning
body: <p>I'm trying to build a drop-down menu using CSS, and I've successfully hidden the drop down menu, but haven't been able to make it reappear. I'm pretty sure that the problem is with the :hover tag, which I've taken out of the css here because I haven't been able to make it work. Help with the CSS? PLEASE? Desperate.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;ul id="menu"&gt;
          &lt;li class="menu"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu"&gt;&lt;a href="#news"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;ul class="sub_menu"&gt;
              &lt;li&gt;Our Mission Statement&lt;/li&gt;
              &lt;li&gt;How Funds Are Spent&lt;/li&gt;
              &lt;ul class="sub_sub_menu"&gt;
                  The Founders
                  &lt;li&gt;A&lt;/li&gt;
                  &lt;li&gt;B&lt;/li&gt;
                  &lt;li&gt;C&lt;/li&gt;
                  &lt;li&gt;D&lt;/li&gt;
                  &lt;li&gt;E&lt;/li&gt;
                  &lt;li&gt;F&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
          &lt;li class="menu"&gt;&lt;a href="#contact"&gt;What We Do&lt;/a&gt;&lt;/li&gt;
          &lt;ul class="sub_menu"&gt;
              &lt;li&gt;T-Shirt Designs&lt;/li&gt;
              &lt;li&gt;Future Design Ideas&lt;/li&gt;
              &lt;ul class="sub_sub_menu"&gt;
                  Fact Sheets
                  &lt;li&gt;How Our Fact Sheets Work&lt;/li&gt;
                  &lt;li&gt;Fact Sheet 1&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
          &lt;li class="menu"&gt;&lt;a href="#about"&gt;Media&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu"&gt;&lt;a href="#contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS is as follows:</p>
  
  <pre><code>ul {
      position: absolute;
      list-style-type: none;
      margin: 0;
      padding: 0;
      padding-top: 0px;
      padding-bottom: 0px;
  }
  li.menu {
      display: inline
  }
  a:link, a:visited {
      font-weight: bold;
      font-size: 14px;
      color: #FFFFFF;
      background-color: #B4B7BD;
      text-align: center;
      padding-top: 3px;
      padding-bottom: 3px;
      padding-right: 20px;
      padding-left: 20px;
      text-decoration: none;
      text-transform: uppercase;
  }
  a:hover, a:active {
      background-color: #B4B7BD
  }
  ul.sub_menu li {
      position: relative;
      display: none;
      width: 100%;
  }
  ul.sub_sub_menu {
      position: relative;
      display: none;
  }
  ul.sub_sub_menu li {
      position: relative;
      display: none;
      width: 100%;
      left: 100%;
  }
  </code></pre>