In Drupal 5, right now the default themes do not come with the ability to add ID's to <li> elements. What's really cool about this tutorial is that the code actually grabs the menu "title" and applies that to the <li> element. For example, you may have a drupal menu you've setup on the left sidebar that shows the following html:

<ul class="menu">

<li>FAQ's</li>

<li>Resources</li>

</ul>

But you really want....

<ul class="menu">

<li ID="FAQs">FAQ's</li>

<li ID="Resources">Resources</li>

</ul>

You'll notice that there is no id for any of these <li> elements by default. This is usually fine, but it is nice to be able to individually target each <li> element. You may want to style them with different colors, or perhaps put icons next to each of the elements. This can be accomplished by these steps:

Firstly, in template.php, add this code at the bottom:

//below code creates id's for each li so you can apply icons to them...

function yourThemeName_menu_item($mid, $children = '', $leaf = TRUE) {

return _phptemplate_callback('menu_item', array(
'leaf' => $leaf,
'mid' => $mid,
'children' => $children)
);

}

Secondly, create a menu_item.tpl.php file with the following contents:

<?php

$link = menu_item_link($mid);

// replace spaces with "_", and strip HTML

$css_id = str_replace(' ', '_', strip_tags($link));

// render the menu link with unique CSS id.

$output = '<li id="'.$css_id.'" class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. $link . $children ."</li>\n";

print $output;

?>

Once you've done these two things, you can go ahead and style the links however you choose!

#sidebar-left li#FAQs {
background: url(/themes/yourThemeName/images/icon_faqs.jpg) no-repeat top left;
}

#sidebar-left li#Resources {
background: url(/themes/yourThemeName/images/icon_resources.jpg) no-repeat top left;
}