Accordion menu issue: Cannot center align icons to left of submenu items...

[AshleyQuick]

1) Script Title: Glossy Accordion Menu

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

3) Describe problem: When attempting to add an icon beside each submenu item, it's forced above the text (I assume it's the display:block on each <li> that's causing this). I've tried several things with css and I cannot get the icon to center align to the left of "Inbox".

Can someone please assist?

I've removed all irrelevant code and uploaded it here (I've attached the files as well - five images, the three .js files and the index file).

http://www.alumni-osu.org/swvabuckeyes/dev/

Thanks,
Ashley

[X96 Web Design]

Adding an IMG tag will be tricky - I'd recommend removing it, and using CSS...

Just make the highlighted changes below, and you'll be set.

.glossymenu div.submenu ul li a {
color:black;
display:block;
padding:2px 0 2px 30px;
text-decoration:none;
background:#fff url(your-icon.png) no-repeat scroll 0 50%;
}
.glossymenu div.submenu ul li a:hover {
background-color:#EDEBE1;
}

[AshleyQuick]

I should have mentioned I'd like to use a different icon for each. What's the most efficient way? Thanks for the help thus far!