Dando un buen formato a menu

[pmuruaga]

Buenas, estoy tratando de hacer un menu. Estoy usando un sitemap como SiteMapDataSource. En la masterpage tengo el siguiente codigo:

Código:

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" SkinID="mainMenu">                    
                     <StaticItemTemplate >
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Imagenes/elemento.gif" /> <asp:HyperLink ID="HyperLink1" SkinID="MenuLinks" runat="server" NavigateUrl=<%# Eval("NavigateUrl") %>>  <%# Eval("Text") %></asp:HyperLink>
                    </StaticItemTemplate>                   
                </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />

En el skin file tengo esto:

Código:

<asp:Menu runat="server" SkinID="mainMenu" Font-Names="Arial" Font-Size="Small" >
    <LevelMenuItemStyles>
        <asp:MenuItemStyle ForeColor="#A0A0A0" Height="30" Width="192px" Font-Names="Arial" Font-Size="Small" CssClass="MenuItem" HorizontalPadding="20" />
    </LevelMenuItemStyles>
    <LevelSelectedStyles>
        <asp:MenuItemStyle ForeColor="#00A1A3" Font-Bold="True" Font-Names="Arial" Font-Size="Small" HorizontalPadding="20" />
    </LevelSelectedStyles>
    <LevelSubMenuStyles>
        <asp:SubMenuStyle ForeColor="#A0A0A0" Font-Names="Arial" Font-Size="Small"/>
    </LevelSubMenuStyles>
    <DynamicSelectedStyle Font-Names="Arial" Font-Size="Small" ForeColor="#00A1A3"/>
    <DynamicMenuItemStyle Font-Names="Arial" Font-Size="Small" ForeColor="#A0A0A0" CssClass="SubMenuItem" Height="30" Width="90" />
</asp:Menu>

En el CSS tengo lo siguiente:

Código:

.MenuItem
{
	border-bottom: inset 1px #CCCCCC;
}

.SubMenuItem
{
	border-bottom: inset 1px #CCCCCC;
}
.MenuLinks
{
	vertical-align: text-bottom;
	text-decoration:none;
}

.MenuLinks:link
{
	color:#A0A0A0;
}
.MenuLinks:visited
{
	color:#A0A0A0;
}
.MenuLinks:hover
{
	color:#00A1A3;
	font-size:small;
	font-weight:bold;
}
.MenuLinks:active
{
	color:#00A1A3;
}

El problema es que el menu aparece asi:
Menu sin deplegar:

Menu desplegado:

Quiero que el submenu aparezca como el menu, con un tamaño de letra pequeño, y el borderbottom que cubra la palabra mas ancha y el resto se adapte a este ancho. No como esta ahora por ejemplo en cambio cuenta facturacion que es largo y los otros son cortitos.
Otro cambio, que aun no pude solucionar, es que en el main, la opcion que tiene submenu, que tiene el pequeño triangulito indicandolo, que ese triangulito no aparezca separado como esta ahora, sino que este integrado en el menu, que los border bottom tengan igual ancho.
Eso es todo por ahora, muchas gracias.