Okay, finally got it sorted out.
Just incase anyone is interested, here is what I did:
In my .ascx file, I used the following control:
<dnn:MENU runat="server"
ID="dnnMENU"
ControlOrientation="Vertical"
UseRootBreadCrumbArrow="false"
MenuItemCssClass="menuItem"
MenuItemSelCssClass="menuItemSelected"
MenuIconCssClass="menuItemIcon"
CSSIndicateChildRoot="menuItemArrow"
CSSIndicateChildSub="menuItemArrow"/>
And then in my skin.css file:
.menuItem
{
background-color: #4D9EDC;
border: none;
font-family: Tahoma, Arial, Helvetica;
font-size: 14px;
font-weight:bold;
color: #FFFFFF;
cursor: hand;
}
.menuItemSelected
{
background-color: #BFE9FF;
font-family: Tahoma, Arial, Helvetica;
font-size: 14px;
font-weight:bold;
color: #000000;
cursor: hand;
}
.menuItemIcon
{
}
.menuItem img
{
display: none;
}
.menuItemSelected img
{
display: none;
}
.menuItemArrow img
{
display: block;
}
In this way, I used the .menuItem and .menuItemSelected classes to hide (display:none) all of the images, then explitly used the .menuItemArrow img to override this for the arrows.
Seems to work just fine!