Menu-item forbliv valgt, ved hover af undermenu?

Hej folkens jeg sidder med et lille problem, og google lader ikke til at kunne hjælpe mig. Jeg har lavet den her hjemmeside som har en menu i toppen, til den har jeg så lavet en slidedown-undermenu, som via Jquary glider ned når man har holdt over en af hovedmenuerne et par milisekunder. Når man så holder musen over en af hovedmenuerne, får den en baggrundsfarve, så man kan se det er den man holder over, men når man kører ned over undermenuen der er poppet op, mister hovedmenuen sin baggrundsfarve, selvfølgelig fordi man ikke længere holder musen over den, hvilket den ikke skal. Så mit problem er, hvordan gør jeg sådan at hovedmenuen forbliver aktiv når jeg holder musen over undermenuen?

Dette er min html-kode:

 <ul id="rightmenu">
     <li><a href="#">Hjælp</a>
         <ul>
             <li><a href="#">Nu på serveren</a></li>
             <li><a href="#">Regler</a></li>
             <li><a href="#">Guides</a></li>
         </ul>
     </li>
     <li><a href="#">Ansøg</a></li>
     <li><a href="#">Log ind</a></li>
 </ul>

Og det her er min css:

 #rightmenu{
     list-style: none;
     font-family: 'Glegoo', serif;
     padding: 20px 0;
     margin: 0 auto;
     list-style: none;
     float: left;
     width: 338px;
     text-align: center;
 }
 
 #rightmenu li{
     display: inline-block;
     margin-right: 2px;
     position:relative;
     z-index:500; 
 }
 
 #rightmenu li a{
     text-decoration: none;
     color: #fff;
     display: block;
     line-height: 100%;
     padding: 12px 20px;
 }
 
 #rightmenu li a:hover{
     color: #155FB0;
     background: rgba(0,0,0,.2);
 }
 
 #rightmenu li ul {
     position:absolute; 
     left:0; 
     display:none; 
     margin:0 0 0 -1px; 
     padding:0; 
     list-style:none;
     text-align: left;
     z-index: 1000;
     font-size: 15px;
     background: #1b1b1b url('billeder/rightbarbg.png');
 }
         
 #rightmenu li ul li {
     width:200px; 
     float:left; 
 }
         
 #rightmenu li ul a {
     display:block;  
     height:15px;
     padding: 20px 20px; 
     color:#fff;
     background: rgba(0,0,0,.2);
 }
 
 #rightmenu li ul a:hover {
     background: rgba(0,0,0,.4);
 }

Og hvis i også lige vil have javascriptet med:

 <script type="text/javascript">
     $(document).ready(function () { 
 
         $('#rightmenu li').hover(
             function () {
                 $('ul', this).stop().slideDown(250);
             }, 
             function () {
                 $('ul', this).stop().slideUp(200);          
             }
         );
     });
 </script>

Jeg håber i kan hjælpe, det ville være fedt, jeg fandt nemlig nogle løsninger på nettet, men de virkede ikke for mig af en eller anden grund! På forhånd tak