Icon styling a menu block in Drupal 7

For my Drupal 7 site, I want to have a nice menu that looks like the one to the right, with little styling icons and the like.  By default Drupal adds little black triangles to any top-level menu item that has sub-menu items below it.  In my example, I've replaced these with nice little custom icons and move the triangles to the sub menu level.

The menu has been already put automatically into a block using the magick of the Menu Block module.  The initial problem is that there's no default way in Drupal 7 to address the individual menu items in order to style them in CSS.  However, the handy Menu Attributes module  comes to our rescue.

Menu attributes adds the ability to assign CSS classes and ids to menu items using the standard Drupal menu item edit screen.  So for example, to style my top-level 'Library' menu item that you see on the right, I edit the menu item and set the following field:

And do so for each of my five top-level menu items.  Having done the above, when I reload my site and look at the HTML for the menu, I see that Menu attribute has added the CSS id to the anchor (<a>) tag and not the list item (<li>) tag:

<li class="last expanded active-trail menu-mlid-654">
  <a id="library-menu-item" class="active-trail" href="/path/to/the/library">Library</a>

/* remove the default list style from the top level items
    this hides the little triangles that Drupal puts there by default */
.menu-name-my-menu ul li {
    list-style:none;
    margin:0;
}

/* now add those little triangles to the menu items below the top level */
.menu-name-my-menu ul ul li a {
    background:url('/installers/misc/menu-collapsed.png') no-repeat 0 5px;
    display:block;
    padding-left:10px;
    margin-left:20px;
}

/* shunt the top level items to the right to make space for the icons */
.menu-name-my-menu ul li a {
    display:block;
    padding-left:25px;
}

/* add the nice icons to each top level item */
.menu a#announcements-menu-item {
    background:url('../images/icons/news-icon.png') no-repeat 0 0;
}
.menu a#performance-menu-item {
    background:url('../images/icons/performance-icon.png') no-repeat 0 0;
}
.menu a#photo-share-menu-item {
    background:url('../images/icons/photo-share-icon.png') no-repeat 0 0;
}
.menu a#stories-menu-item {
    background:url('../images/icons/stories-icon.png') no-repeat 0 0;
}
.menu a#library-menu-item {
    background:url('../images/icons/library-icon.png') no-repeat 0 0;
}

And that's it!