title: Hover one element, and change another (without using Javascript)
body: <p>I have a nested CSS menu that I can't get the submenus to come up.</p>
  
  <p>I took the code from <a href="http://www.alistapart.com/articles/horizdropdowns/style2.css" rel="noreferrer">A list apart</a>.  The example on that site works perfectly fine, but since I have 2 CSS navigational menus on my page, I have to put my HTML elements in different CSS classes.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      ul#lvl1 {
          margin:0;
          padding:0;
          list-style:none;
          width:150px; /* Width of Menu Items */
          border-bottom:1px solid #ccc;
      }
      li.lvl1 {position:relative}
      ul.lvl2 {
          position: absolute;
          left: 149px; /* Set 1px less than menu width */
          top: 0;
          display: none;
      }
      /* Styles for Menu Items */
      li.lvl1 &gt; a {
        display: block;
          text-decoration: none;
          color: #777;
          background: #fff; /* IE6 Bug */
          padding: 5px;
          border: 1px solid #ccc;
          border-bottom: 0;
      }
      /* Fix IE. Hide from IE Mac \*/
      *  html.lvl1 &gt; ul &gt; li {float:left;height:1%}
      *  html.lvl1 &gt; ul &gt; li &gt; a {height:1%}
      /* End */
      li.lvl2 &gt; a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
      li.lvl2 &gt; a { padding: 2px 5px; } /* Sub Menu Styles */
      a.lvl1:hover ul.lvl2 {display: block} /* The magic */
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ul id="lvl1"&gt;
      &lt;li class="lvl1"&gt;
        &lt;a class="lvl1" href="#"&gt;item1&lt;/a&gt;
        &lt;ul class="lvl2"&gt;
          &lt;li class="lvl2"&gt;
            &lt;a class="lvl2" href="#"&gt;subitem1&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="lvl1"&gt;
        &lt;a class="lvl1" href="#"&gt;item2&lt;/a&gt;
        &lt;ul class="lvl2"&gt;
          &lt;li class="lvl2"&gt;
            &lt;a class="lvl2" href="#"&gt;subitem2&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now when I hover over the "a" on level 1, the "ul" on level 2 won't come up.  Can someone please shed some light?  I may be missing something obvious.  Thanks!</p>