Menu horizontal à deux niveaux mettant en évidence la page actuelle

Question

J'ai fait un menu à deux niveaux en utilisant CSS et HTML (ul's etc.). Ce que je veux, c'est le niveau supérieur à sélectionner (en utilisant la classe 'selected') et l'élément du second niveau qui correspond à la page courante pour avoir la classe 'active' (qui est juste en gras). Par exemple, lorsque l'utilisateur accède à '/maintenance/company.aspx', je souhaite que l'élément de menu Maintenance soit sélectionné et que le sous-menu "Sociétés" soit en gras.

La sélection du 1er niveau fonctionne et le gras fonctionne, mais je n'arrive pas à afficher le sous-menu actuel (2ème niveau).

CSS

#menu 
{ 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:relative; 
    background:url(../images/menubg.gif) repeat-x; 
    height:32px; 
    text-transform:uppercase; 
    font-family: Arial, Helvetica, sans-serif; 
} 
#menu li 
{ 
    float:left; 
    padding:0; 
    margin:0; 
} 
#menu a 
{ 
    text-decoration:none;  
    padding:10px 15px; 
    display:block; 
    color:#ffffff; 
} 
#menu li:hover a, a.selected 
{ 
    background:#ffffff; 
    color: #666666 !important; 
} 
#menu li span 
{ 
    float:left; 
    padding: 5px 0; 
    position:absolute; 
    display:none; 
    left:0; 
    top:31px; 
    background:#ffffff; 
    color: #000; 
    width: 100%; 
} 
#menu li:hover span, .selectedSubMenu { display:block; } 
#menu li span a { display: inline; padding: 5px 15px; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ 
#menu li span a:hover {text-decoration: underline;} 
.active { font-weight: bold; } 

HTML

<ul id="menu">    
    <li><a href="#" id="contracts">Contracts</a> 
     <span> 
      <a href="/contracts/submitcontract.aspx">New Contract</a> 
      <a href="/contracts/search.aspx">Find Contract</a> 
     </span> 
    </li> 
    <li><a href="#" id="invoicing">Invoices</a> 
     <span> 
      <a href="/invoicing/invoicerun.aspx">Invoices Run</a> 
      <a href="/invoicing/invoicerun.aspx">Invoicing History</a> 
     </span> 
    </li> 
    <li><a href="#" id="maintenance">Maintenance</a> 
     <span> 
      <a href="/maintenance/account.aspx">Accounts</a> 
      <a href="/maintenance/agent/search.aspx">Agents</a> 
      <a href="/maintenance/company.aspx">Companies</a> 
      <a href="/maintenance/contact.aspx">Contacts</a> 
      <a href="/maintenance/networks.aspx">Networks</a> 
      <a href="/maintenance/plans.aspx">Plans</a> 
     </span> 
    </li> 
    <li><a href="#" id="admin">Control Panel</a> 
     <span> 
      <a href="/admin/userlist.aspx">Users</a> 
      <a href="/admin/systemsettings.aspx">System Settings</a> 
     </span> 
    </li> 
</ul> 

JQUERY

function markActiveLink() { 
    var path = location.pathname.substring(1); 

    if (path) { 
     $('#menu li > a').each(function() { 
      var $category = $(this).attr('id'); 
      if (path.indexOf($category) > -1) { 
       $(this).addClass('selected'); 

      --> $(this).siblings('span:first').addClass('selectedSubMenu'); 

       $('#menu li span a[@href="/' + path + '"]').addClass('active');       
      } 
     });    
    } 
} 

$(document).ready(markActiveLink); 

Answer 1

je me suis dit ce qu'il était avec une enquête avec Firebug. J'avais besoin d'ajouter une certaine spécificité à mon css.

#menu li:hover span, .selectedSubMenu { display:block; } 

est devenu

#menu li:hover span, #menu li span.selectedSubMenu { display:block; } 

et je devais ajouter un peu de css pour changer la couleur de l'ancre

#menu li span.selectedSubMenu a { color:#666666; } 

http://www.htmldog.com/guides/cssadvanced/specificity/ aidé à expliquer à moi.