title: vertical menu with sub menu but parent links not staying active
body: <p>I have been redoing a vertical menu with css, as can be seen in the code below, and I can't seem to get the first menu option to stay active when on the first sub menu option and the first and second to stay active when on the third sub menu.</p>
  
  <p>What am I missing here please?</p>
  
  <p>I have also been trying to make it work in all browser with different hacks. How can I make it work for most, if not all browsers and where are the limitations?</p>
  
  <p>Below is the css I wrote:</p>
  
  <pre><code>#nav li a {
      display:block;
      width:250px;
      height:30px;
      color:#FFF;
      background-color: #33b4d4;
      text-decoration:none;
      font-size:1em;
      line-height:1.8em;
      font-weight:bold;
      border:1px solid #000;
      text-indent:20px;
  }
  
  #nav li a:hover {
      display:block;
      color:#33b4d4;
      background-color: #FFF;
  }
  
  #nav ul.menu {
      display:block;
      width:250px;
      margin:0;
      padding:0;
      list-style-type: none;
  }
  #nav ul.menu &gt; li, #nav ul.menu ul &gt; li , #nav ul.menu ul &gt; li &gt; ul &gt; li {
      float: left;
      display:block;
      width:250px;
      height:30px;
      background-color: #33b4d4;
      text-indent:20px;
  }
  #nav ul.menu ul ul li {
    float: none;
  }
  #nav li &gt; ul {
    display: none;
  }
  #nav li:hover &gt; ul {
      position: absolute;
      display:block;
      width:250px;
      padding:0;
      margin-top:-22px;
      margin-left:220px;
  }
  </code></pre>
  
  <p>And below is the menu:</p>
  
  <pre><code>        &lt;div id="nav"&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/" title=""&gt;Home&lt;/a&gt;
                      &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/" title=""&gt;Home&lt;/a&gt;
                      &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/" title=""&gt;Home&lt;/a&gt;
                              &lt;ul class="sub-menu"&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/" title=""&gt;Home&lt;/a&gt;
                              &lt;ul class="sub-menu"&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/" title=""&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>I tried changing:</p>
  
  <pre><code>#nav li a:hover {
      display:block;
      color:#33b4d4;
      background-color: #FFF;
  }
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>#nav ul.menu &gt; li:hover a {
      display:block;
      color:#33b4d4;
      background-color: #FFF;
  }
  </code></pre>
  
  <p>But now the parent link stays active but all the sub menu link are active too at the same time. What am I missing?</p>