Adding icons to Accordion Menu: menuitem and submenuheader

[tuva trader]

1) Script Title: Accordion Menu script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

3) Describe problem: I am trying to find a way to add a unique small .gif icon to the left side of each menuitem and submenuheader of the Accordion Menu. Is this possible?
I have the menu working just great here: http://scs-intl.com/trader/bumper_st...newmenu_10.htm
However I want it to use the "glossymenu" buttons as they are but with the icons I have in my old frames menu.
http://scs-intl.com/trader

Any help would be very appreciated. I have tried to read all related threads and documentation and I cannot find a solution.
Thanks for the great script

[ddadmin]

What you can do is give each LI element a background image, with that image being the desired icon. Something like:

<li style="background:urltrader/navimages/folder.gif) center left no-repeat"><a href="http://google.com">Image CSS</a></li>
<li style="background:urltrader/navimages/folder2.gif) center left no-repeat"><a href="http://yahoo.com">Background CSS</a></li>
"
"

Once you've done that, you'll find you need to increase the left padding of each link, so the icon doesn't overlap the link text. Inside the CSS for the menu, the line in red would be what you'd change:

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 25px;
}

[tuva trader]

This gets it working for the <li> tag but I had to modify the tag as such:
<li style="background-image:url('../navimages/folder.gif'); background-repeat: no-repeat;">

The problem remains of how to get the <a> tags to do the same:
<a class="menuitem" href="../search.htm">Search The Website</a>

is there a way to get icon's into these as well?

Thank you again.

[ddadmin]

The technique I described above relies on targeting a container element other than the A itself to stick the icon into. That's because the A themselves already carry a background image that render the blue glossy look. I'm not sure there's an easy way to preserve the existing Glossy Menu style fully while having icons appear on every menu item, instead of just the sub menu items...

[tuva trader]

I'd certainly welcome an even not-so "easy way" to put small icons into each menu item. The main thing that I need is for the icons to appear to the left of the text and still have the rollover effect. If anyone in the dd forum community can think up a work-around it would be great.