Hi Mat,

yes, this is doable within the STandard dnn:NAV Provider.

I have created the following solution:

Mainmenu (horizontal) Shows only the Root Items

<dnn:NAV ID="MainMenu" runat="server" ControlOrientation="horizontal" ExpandDepth="1"/>

SubMenu (vertical) Shows always the Child Items of the selected Root Item

<dnn:NAV ID="SubMenu" runat="server" ControlOrientation="vertical" Level="child"/>

These Menu's can now be placed within your Skin wherever you like.

Hi Mat,

i'll show you a piece of a Skin which i have created for one of my Customers.

Menu definition of the SubMenu within the Skin:

<dnn:NAV runat="server" ID="SubMenu" ProviderName="DNNMenuNavigationProvider" IndicateChildren="true"
                            ControlOrientation="Vertical" CSSNodeRoot="sub_dnnmenu_rootitem" CSSNodeHoverRoot="sub_dnnmenu_rootitem_hover"
                            CSSNodeSelectedRoot="sub_dnnmenu_rootitem_selected" CSSBreadCrumbRoot="sub_dnnmenu_rootitem_selected"
                            CSSContainerSub="sub_dnnmenu_submenu" CSSNodeHoverSub="sub_dnnmenu_itemhover"
                            CSSNodeSelectedSub="sub_dnnmenu_itemselected" CSSContainerRoot="sub_dnnmenu_container"
                            CSSControl="sub_dnnmenu_bar" CSSNode="sub_dnnmenu_bar" CSSBreak="sub_dnnmenu_break" Level="child"/>

According to this the CSS-Definitions for this Menu:

/*--------- dnn menu style ----------*/
/* sub menu td */
.sub_dnnmenu_bar
{
    cursor:pointer;
    font-size: 11px;
    background-color:transparent;
}

/*  Sub Menu Normal  */
.sub_dnnmenu_rootitem 
{   
    color: #009CE1;
    font-size: 13px;
    font-family: Helvetica,Arial,sans-serif;
    font-weight:bold;    
    text-align:left;
    padding:5px 12px 5px 12px;
    margin-right:1px;
}

/*  Sub menu hover  */
.sub_dnnmenu_rootitem_hover
{ 
    color:#000000;
    font-size: 13px;
    font-family: Helvetica,Arial,sans-serif;
    font-weight:bold;
    text-align:left;
    padding:5px 12px 5px 12px;
    margin-right:1px;
}

/*  Sub menu selected  */
.sub_dnnmenu_rootitem_selected
{
    color:#000000;
    font-family: Helvetica,Arial,sans-serif;
    font-weight:bold;
    text-align:left;
    font-size: 13px;
    padding:5px 12px 5px 12px;
    margin-right:1px;
}

/*  SSub Menu Normal */
.sub_dnnmenu_submenu
{
    border:1px solid #00334A;
}

.sub_dnnmenu_submenu td
{
    /*background-color:#E1E8ED;*/
    background-color:#009CE1;
    z-index: 1000;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    text-align:left;
    color:#FFFFFF;
    padding: 0px 5px;
    margin:0px;
}

/*  SUB Menu hover & selected */
.sub_dnnmenu_itemhover td,.sub_dnnmenu_itemselected td  
{ 
    font-size: 12px;
    background: #E1F4FC;
    color:#000000;
    font-family: Helvetica,Arial,sans-serif;
    font-weight:bold;
    text-align:left;
    z-index: 1000;
    padding: 0px 5px;
    margin:0px;
}

.sub_dnnmenu_break
{
    height: 2px;
    background-color: #D5E0FF;
}

You will recognize that not all CSS Attributes within the Menu definition have counterparts within the CSS File. I just generally tend to fill all of these within the Menu definition, just because i sometimes verget those at a later stage. :-)

Hope this helps!