By wonder95 on

I'm working on a menu issue that requires the ability to assign a separate CSS class to a submenu item than the parent menu. It itself, this is not difficult. The problem is, the last item in the menu list at the parent level is assigned the same class value. Here is the source:

<table border="0" cellpadding="0" cellspacing="0" id="content">
  <tr>
    <td id="sidebar-left">
        <div class="block block-menu" id="block-menu-56">
    <h2 class="title">Products</h2>
    <div class="content">
<ul class="menu">
<li class="expanded"><a href="/Products/Detectors" title="Detectors" class="active">Detectors</a>
<ul class="menu">
<li class="leaf"><a href="/Products/Stratos_Micra_25_Input_Relay_Card" title="Stratos-Micra 25 with Docking Station and Input Relay Card">Micra 25</a></li>
<li class="leaf"><a href="/Products/Stratos_Micra_100_Detector_with_Docking_Station_and_Input_Relay_Card" title="Stratos-Micra 100  Detector with Docking Station and Input Relay Card">Micra 100 w/ Input</a></li>
<li class="leaf"><a href="/Products/Stratos_Micra_100_Detector_with_Docking_Station" title="Statos-Micra 100 Long Des">Micra 100S</a></li>
<li class="leaf"><a href="/Products/Stratos_HSSD_Standard_detector" title="Stratos-HSSD Standard detector">Stratos-HSSD</a></li>
<li class="leaf"><a href="/Products/Stratos_Micra_25" title="Stratos Micra 25">Stratos Micra 25</a></li>

</ul>
</li>
<li class="collapsed"><a href="/Products/Accessories" title="Accessories">Accessories</a></li>
<li class="collapsed"><a href="/Products/Powersupplies" title="Power Supplies">Power Supplies</a></li>
<li class="collapsed"><a href="/Products/Remote">Remote Equiptment</a></li>
<li class="collapsed"><a href="/Products/Pipe" title="Sample Pipe and Fittings">Sample Pipe and Fittings</a></li>
<li class="collapsed"><a href="/Products/Software" title="Software">Software</a></li>
<li class="collapsed"><a href="/Products/Spareparts" title="Spare Parts">Spare Parts</a></li>
<li class="collapsed"><a href="/Products/Subracks">Subracks &amp; Enclosures</a></li>
<li class="leaf"><a href="/Products/newproducttest">New Product</a></li>

</ul>
</div>
 </div>
    </td>

Notice how the New Product item has the same class value as the items in the Product menu above (<li class="leaf">). The customer wants to style the items under the Product menu (in this case) different than the New Product item at the bottom. If I use this CSS selector

ul.menu li.leaf

it styles all items the same. So, my questions are these:

1) Is there a way in CSS to style these items separately?
2) If not, it seems that the menu code would need to be hacked to assign a different class value to either the submenu items or to the last item (New Product in this case). Where would that be done? I've been looking through the menu.module, and I can't see where the class is assigned. Or is there a way to override this?

Thanks.

Wonder95

⋅ Categories: Drupal 5.x