title: How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)
body: <p>Newbie to CSS and can only find single level menus.  Here's the Menu and the list items:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Forums&lt;/a&gt;
          &lt;ul&gt;
              &lt;a href="#"&gt;Basketball&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Trading&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Personal Collections&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Box Breaks&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see, it would be multi-tiered.  Now, with the CSS I have, only Home and Forums are displayed first, and when I hover over Forums, Basketball is displayed...but so are the subsequent menu items.  I want those to stay hidden until I hover over basketball.  Anyone know how to do this with just CSS or as little JavaScript as possible?  Thanks.  Here's the CSS code I have:</p>
  
  <pre><code>ul
  {
      margin: 0;
      padding: 0;
      list-style: none;
      width: 150px;
      border-bottom: 1px solid #ccc;
  }
  
  ul li
  {
      position: relative;
  }
  
  li ul
  {
      position: absolute;
      left: 149px;
      top: 0;
      display: none;
  }
  
  ul li a
  {
      display: block;
      text-decoration: none;
      color: #777;
      background: #bad8f8;
      padding: 2px 0 2px 10px;
      border: 1px solid #ccc;
      border-bottom: 0;
  }
  
  li:hover ul
  {
      display: block;
  }
  
  /* Styles for validation helpers
  -----------------------------------------------------------*/
  .field-validation-error
  {
      color: #ff0000;
  }
  
  .field-validation-valid
  {
      display: none;
  }
  
  .input-validation-error
  {
      border: 1px solid #ff0000;
      background-color: #ffeeee;
  }
  
  .validation-summary-errors
  {
      font-weight: bold;
      color: #ff0000;
  }
  
  .validation-summary-valid
  {
      display: none;
  }
  </code></pre>