title: keep css menu parent item active when hovering over sub menu
body: <p>I have this css menu with sub items, how can i keep the menu item active (have a different background color) when hovering over the sub items?</p>
  
  <p>current CSS code:</p>
  
  <pre><code>#nav {
      background-color:#F36F25;
      margin:14px 0 0 0;
      width: 100%;
      height:35px;
      left:0;
  }
  #nav&gt;li {
      float:left;
      list-style:none;
  }
  #nav li:hover ul {
      position:absolute;
      display:block;
  }
  #nav li a {
      display: inline-block;
      padding: 8px;
      margin:0;
      background: #F36F25;
      text-decoration: none;
      color: #FFFFFF;
      border-right:1px solid #F36F25;
  }
  #nav li a:hover, #nav li a.active {
      background: #666666;
      cursor:pointer;
  }
  #nav li ul {
      position:absolute;
      display: none;
      list-style:none;
      margin:0;
  }
  #nav li ul li {
      margin-top:0;
      margin-right:0;
      margin-bottom:0;
      margin-left:-40px;
  }
  #nav li ul li a {
      background-color: #F36F25;
      color:#FFFFFF;
      border:1px solid #F36F25;
      width:145px;
  }
  #nav li ul li a:hover {
      background-color: #666666;
      border:1px solid #f36f25;
  }
  .clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  </code></pre>
  
  <p>here is a fiddle with the fulle code too: <a href="http://jsfiddle.net/dumJd/" rel="nofollow">http://jsfiddle.net/dumJd/</a></p>