Perhaps approaching this problem from a different perspective could make it much simpler. Instead of relying on sprites to achieve the desired outcome, consider looking at it through a javascript lens...you're already halfway there!
Begin with your well-organized UL list. It's in good shape, but may require some formatting adjustments:
<ul id='menu'><br>
<li><a href="#aa">Home</a></li><br>
<ul>
<li class="current"><a href="/About/News.aspx">News</a></li>
<li><a href="/About/Mission.aspx">Mission Statement</a></li>
</ul><br>
</li><br>
...
</ul>
In essence, every time you need another nested element, insert a list inside your li. Superfish will handle the onclicks and additional functionalities for you.
Integrate Superfish into your page and apply it to the UL list
$(document).ready(function(){
$("ul.menu").superfish();
});
Utilize CSS to set backgrounds on the <li> elements.
Use JqueryUI to add rounded corners to specific elements. Apply the class "ui-corner-bl" for bottom left, "ui-corner-br" for bottom right, etc.
Adjust hovers using CSS
I switched to this approach a while ago to replace a poorly executed menu similar to what you're facing. Menus come with various complexities -- especially when they are extensive and nested like my site's -- so they require patience. Nevertheless, this solution will simplify maintenance tasks significantly. If any menu item changes, you can update it directly in the code rather than modifying graphics. This alone could save hours. Additionally, it can boost speed by reducing download requirements.