Hi all, I designed a menu style (first menu in the pic) and applied to one of my site. At the right side of the submenu there should be a 2px black border.

Then I worte css like this:

.main_dnnmenu_submenu td
{
    background:#F2462E url(../images/submenu_bg_normal.jpg) repeat-y top right;
    z-index: 1000;
    font-size: 12px;
    font-weight:normal;
    text-align:left;
    color:#fff;
    padding: 5px 5px;
    margin:0px;
    border-right:2px #000 solid;
}

But it doesn't work quite well I think it's because there is a Icon column and Arrow column at the both side of the submenu, so the border has been added to the right side of the submenu item td.

This is the NavMenu part in my ascx file:

<dnn:NAV runat="server" id="dnnNAV"  ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Horizontal" CSSNodeRoot="main_dnnmenu_rootitem" CSSNodeHoverRoot="main_dnnmenu_rootitem_hover" CSSNodeSelectedRoot="main_dnnmenu_rootitem_selected" CSSBreadCrumbRoot="main_dnnmenu_rootitem_selected" CSSContainerSub="main_dnnmenu_submenu" CSSNodeHoverSub="main_dnnmenu_itemhover" CSSNodeSelectedSub="main_dnnmenu_itemselected" CSSContainerRoot="main_dnnmenu_container" CSSControl="main_dnnmenu_bar" CSSBreak="main_dnnmenu_break"  />

Can any one please tell me how I can turn off the Icon and Arrow column?

Thanks a lot..

Try adding usearrows="false" to the dnn:NAV attributes.

If you could post a link to an example page this is easier to answer