Question

I have a navigation menu which has default styling…

<nav>   
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li>
   <a href="#">Home</a>
  </li>
  <li>
   <a class="MenuBarItemSubmenu" href="membership.php">Membership</a>
   <ul>
    <li><a href="#">General</a></li>
    <li>
     <a class="MenuBarItemSubmenu" href="#">Adult</a>
     <ul>
      <li><a href="#">Beginner</a></li>
      <li><a href="#">Intermediate</a></li>
      <li><a href="#">Advanced</a></li>
     </ul>                    
    </li>
   [...]
</nav>

There is styling for this like blah:

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a {
 display: block;
 cursor: pointer;
 background-color: #000;
 padding: 0.5em 0.75em;
 color: #FFF;
 text-decoration: none;
}
/* Menu items that have mouse over or focus have an off-white background and dark text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
 background-color: #EEE;
 color: #333;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with an off-white background and dark text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
 background-color: #EEE;
 color: #333;
} /* And so on... */

But I want something different for submenus, and also for items that are highlighted. This question isn’t specifically about that, because I have a solution which, if not the most elegant, makes sense, that is to construct an entirely different selector:

#topitem:hover, #topitem:focus {
 background-color: #FFF;
 color: #000;
}

#subitem:hover, #subitem:focus{
 background-color: #FFF;
 color: #000;
}

and then have the corresponding HTML

<nav>   
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#" id="topitem">Home</a></li>
  <li><a class="MenuBarItemSubmenu" id="topitem" href="membership.php">Membership</a>
 <ul> ...

This works fine.. but er… there shouldn’t be more than one instance of any id. So I say, K, let’s have these as classes:

CSS

.topitem:hover, .topitem:focus {
 background-color: #FFF;
 color: #000;
}

.subitem:hover, .subitem:focus {
 background-color: #FFF;
 color: #000;
}

HTML

 <nav>  
  <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="#" class="topitem">Home</a></li>
   <li><a class="MenuBarItemSubmenu topitem" href="membership.php">Membership</a>
    <ul> ... 

but much to my surprise this doesn’t work at all…

Anybody have any ideas?

Answer 1

The ID’ed version worked because CSS rules for IDs will always win out over those for classes.

Class styling is then also dependant on when in the style sheet the rule is declared.

If you declare your subitem style before you declare your default <li> style, then the default style will win out. Move the required style rules below the default style and that should solve your problem.