javascript - メニュー要素にカーソルを合わせなくても、同じ CSS 背景を維持する

Question

ドロップダウン メニューでは、対応するサブメニューにカーソルを合わせたときに、メニュー要素の背景を維持したいと考えています。

スクリプトは次のとおりです。

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet name="style.css" library="css" />
    <h:outputStylesheet name="styleTableExpansion.css" library="css" />
    <ui:insert name="tohead">content</ui:insert>
    <script type="text/javascript">
        function affecter_back(){
            var a = document.getElementById("menuparam")
            a.style.backgroundColor = 'red';
        }
    </script>
</h:head>

HTMLは次のとおりです。

<div id="templatemo_menu">
  <ul id="menuDeroulant">
    <li><a href="/impression/faces/vues_admin/acceuil_admin.xhtml" class="current"><span class="home">Acceuil</span></a></li>
    <li><a href="/impression/faces/vues_admin/touslesCommandes.xhtml" class="commandes"><span class="commandes">Commandes</span></a></li>
    <li><a href="/impression/faces/vues_admin/utilisateurs.xhtml"><span class="users">Utilisateurs</span></a></li>
    <li><a href="/impression/faces/vues_admin/newMessage.xhtml"><span class="gallery">Message</span></a></li>
    <li><a href="/impression/faces/vues_admin/historiqueMessages.xhtml"><span class="contact">Messages</span></a></li>
    <li>
      <a id="menuparam" href="/impression/faces/vues_admin/historiqueMessages.xhtml"><span class="contact2">Paramétres</span></a>
      <ul class="sousMenu">
        <li><a onmouseover="affecter_back()" href="#">CSS</a></li>
        <li><a onmouseover="affecter_back()" href="#">Graphic design</a></li>
        <li><a onmouseover="affecter_back()" href="#">Development tools</a></li>
        <li><a onmouseover="affecter_back()" href="#">Web design</a></li>
      </ul>
    </li>
  </ul>     
</div>

しかし、それは私が望むことをしません。何か案は？