title: jQuery Multi Level CSS Menu on-hoover not working
body: <p>im using a jQuery Multi Level CSS Menu and when on mouse hover each subnav appears directly underneath the hovered/clicked list item.<br>
  The problem i am having is the selected parent item's bg color is not keeping the on-hover color when hovering down over the subnav list.<br>
  Would appreaciate any help, i've been struggling with this for hours.</p>
  
  <p>demo on <a href="http://jsfiddle.net/UqKyh/" rel="nofollow">http://jsfiddle.net/UqKyh/</a></p>
  
  <p>here is the html:</p>
  
  <pre><code>&lt;div id="topnav" class="jquerycssmenu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Park Info&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;About SVB&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Media Recognitions&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Trip Tips&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;FAQ's&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Policies&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Rides &amp; Attractions&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Our Slides&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Our Kids Area&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Picnic Areas&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Groups&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Group Rates&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Book Group&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;br style="clear: left" /&gt;
      &lt;/div&gt;  &lt;!-- /topnav --&gt;    
  </code></pre>
  
  <p>here is the css:</p>
  
  <pre><code>.jquerycssmenu{
              font-family: 'OxygenBold', arial;
              color: #3a4769;
              text-transform: uppercase;
              line-height: 47px;
              font-size: 18px;
              padding-left: 80px; /*offset of tabs relative to browser left edge*/
              background-image: url(images/nav-repeat.png);
              background-repeat: repeat-x;
              -webkit-border-top-left-radius: 10px;
              -webkit-border-top-right-radius: 10px;
              -moz-border-radius-topleft: 10px;
              -moz-border-radius-topright: 10px;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              }
  
              .jquerycssmenu ul{
              margin: 0;
              padding: 0;
              list-style-type: none;
              }
  
              /*Top level list items*/
              .jquerycssmenu ul li{
              position: relative;
              display: inline;
              float: left;
              }
  
              /*Top level menu link items style*/
              .jquerycssmenu ul li a{
              display: block;
              padding: 5px 17px 4px 20px;
              margin-right: 0; /*spacing between tabs*/
              border-bottom-width: 0;
              color: #2d2b2b;
              text-decoration: none;
              }
  
              .jquerycssmenu ul li a:hover {
              background-color: #fcae18; /*tab link background during hover state*/
              color: #fff;
              }
  
              /*1st sub level menu*/
              .jquerycssmenu ul li ul{
              position: absolute;
              text-transform: capitalize;
              left: 0;
              display: block;
              visibility: hidden;
              border-top: 1px solid #ff9d14;
              }
  
              /*Sub level menu list items (undo style from Top level List Items)*/
              .jquerycssmenu ul li ul li{
              display: list-item;
              float: none;
              }
  
              /*All subsequent sub menu levels vertical offset after 1st level sub menu */
              .jquerycssmenu ul li ul li ul{
              top: 0;
              }
  
              /* Sub level menu links style */
              .jquerycssmenu ul li ul li a{
              font-family: 'OxygenRegular', arial;
              font-size: 15px;
              width: 160px; /*width of sub menus*/
              background: #fcae18;
              color: #fff;
              padding: 0 20px;
              margin: 0;
              border-top-width: 0;
              border-bottom: 1px solid #ff9d14;
              }
  
              .jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
              background: #ff9d14;
              color: #fff;
              }
  
              /* ######### CSS classes applied to down and right arrow images  ######### */
  
              .downarrowclass{
              position: absolute;
              top: 20px;
              right: 5px;
              }
  
              .rightarrowclass{
              position: absolute;
              top: 5px;
              right: 5px;
              }
  </code></pre>