Can someone please provide me with what I need to style a submenu's submenu. I've read the documentation and I know I need something with the .m2-0 I think? But I'm not sure where to add this. Here is my current nav CSS.

#menu
{
    color: #000000;
    height: 27px;
 width:955px;
    background: #4e4e4e url(img/Exal_r3_c1.gif) repeat-x;
    font: bold 11px Verdana;
   
}

/* CSSNodeRoot */
.main_menu_rootitem
{

 float:left;
 padding:6px 12px 0px 12px;;
 text-align:center;
   
   }

/* Menu Node Hover Root */
.main_menu_rootitem_hover
{
 float:left;
 padding:6px 12px 0px 12px;
 text-align:center;
    color: #00a3b4;
}

/* Menu Node Selected Root */
.main_menu_rootitem_selected
{
   
 float:left;
 padding:6px 12px 0px 12px;
 text-align:center;   
    color:#F26B38;
}
   
/* Sub Menu Container */
.main_menu_submenu
{
    border: 1px solid #777;
    background: #ffffff url(img/nav.gif) repeat-x;
 margin-top:5px;
 margin-left:7px;
 font: bold 11px Verdana;
 color:000000;
 z-index: 1000;
 
}

.main_menu_submenu td
{
   
 margin-top:0px!important;
    padding: 5px;
    z-index: 1000;
    text-align: left;
}

/* Sub Menu Hover */
.main_menu_itemhover td
{
    color: #00a3b4;
}

/* Sub Menu Selected */
.main_menu_itemselected td
{
    color:#F26B38;
}

Hie IDn

I would assume you are using the DNNMenuNavigationProvider, and by "right to left mode" you mean "orientation". But here are settings you can play arnd with and hopefully you will "customize" your menu. However for some strange unknown to me the submenus won't show in IE8. Change controlOrientation from Vertical to Horizontal. You can also control how the submenu is displayed by changing the custom atrribute SubMenuOrientation. Hope my assumptions are right.

   <dnn:NAV runat="server" id="NAV1"  ProviderName="DNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Vertical" CSSControl="mainMenu" />
                                          <dnn:NAV runat="server" id="NAV2" ProviderName="DNNMenuNavigationProvider" CSSControl="mainMenu" >
                                            <CustomAttributes>
                                              <dnn:CustomAttribute Name="AnimationType" Value="Slide" />
                                              <dnn:CustomAttribute Name="EasingType" Value="Sine" />
                                              <dnn:CustomAttribute Name="EasingDirection" Value="In" />
                                              <dnn:CustomAttribute Name="AnimationLength" Value="1" />
                                              <dnn:CustomAttribute Name="AnimationInterval" Value="3" />
                                              <dnn:CustomAttribute Name="RenderMode" Value="Normal" />
                                              <dnn:CustomAttribute Name="SubMenuOrientation" Value="Vertical" />
                                            </CustomAttributes>
                                        </dnn:NAV>

and here is the long CSS

/*--------- dnn menu style ----------*/
/* main menu td */
.mainMenu
{
    margin-left: 0px;
    font-size: 100%;
    padding: 0 0 20px 0; /*cursor:pointer;     font-size: 11px;      background-color:transparent;     width:216px;*/
}

/* Main Menu Normal */
.mainMenu .root
{   
    margin-left: 0px;
    padding: 0 0 0 20px;
    position: relative;
    float: left;
    line-height: 20px;
    width: 100%;
    list-style: none;
    text-align: left;
    -moz-box-sizing: border-box;
    font-size: 11px;
    display: block;
    width: 100%; /*w\idth : 12.5em;*/
    text-decoration: none;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0;
    /*padding: 0px 45px 4px 20px;*/
    border-bottom: 1px solid #b5954c;
    color: #FFFFFF;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
}


/* Main menu hover */
.mainMenu .hov{
    color:#fff;
    background-color: #d9ae4f;
}

/* Main menu selected */
.mainMenu .sel, .mainMenu .bc {
    color:#FFF;
    background-color: #d9ae4f;
}
.mainMenu table{
    border:1px solid #C0D6E5;
    }

/* SUB Menu Normal */
.mainMenu tr.mi{
    background-color:  #E4C481;
    z-index: 1000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight:bold;
    text-align:left;
    color: #FFFFFF;
    line-height: 20px;
    text-transform:none;
    border-bottom: 1px solid #b5954c;
   
}
.mainMenu tr.mi td{
    padding:  0 0 0 0;
    text-transform:none;
    border-bottom: 1px solid #b5954c;
}

/* SUB Menu hover & selected */
.mainMenu tr.hov {
    background-color: #d9ae4f ;
    padding: 0px 0px 0px 1px;
}

.mainMenu tr.hov td{
    color:#fff;
    text-align: left;
    background-color: #d9ae4f;
}

.mainMenu tr.sel, .mainMenu tr.bc{
    text-align: left;
    background-color: #d9ae4f;
}

.mainMenu tr.sel td, .mainMenu tr.bc td{
    color:#fff;
    text-align: left;
    background-color: #d9ae4f;
}


 

I'm trying to create a vertical menu. The page structure I have is along the following lines:

Root Page (level 1)
...Child page (level 2)
...Child page (level 2)
......Child page (level 3)
......Child page (level 3)
Root Page (level 1)
...Child page (level 2)
......Child page (level 3)
......Child page (level 3)

So basically I have a three level hierarchy. What I would like to do is if I'm on a root page, display all of that page's children. If I'm on a child of the root page, display all of the siblings of the current page, and all of the children of the current page (statically, not as a mouse-over menu). If I'm on a child of a child of the root page, display all of the parent's siblings, and all of the current page's siblings. That's not overly clear, so here's a quick screen grab from the site concept design:

Basically the above shows how the menu would look for the page Root Page > Mobile > Events. The root page isn't displayed (and shouldn't be as there's a separate horizontal nav object for the root pages). The menu would look the same for the page Root Page > Mobile, showing all the Mobile page's siblings and all of the Events page's siblings, just with a different item highlighted (I'll deal with the highlight in CSS so no need to worry about that).

I've been looking at the parameters for the nav object, and Root will show me all the root pages as well (not what I want because of the separate root nav object), Child will show me all children of the current page (fine for the root page, but no use for pages deeper in the hierarchy), and Same will show me siblingsof the current page (fine for chidlren of the root, but no deeper than that in the hierarchy), and Parent will show me the parents of the current page, which is no use for anything except for pages at the deepest level of the hierarchy, and then doesn't show the siblings of those pages.

I'm happy to use separate skin pages with different configurations for the different levels, but that hasn't seemed to have helped so far.

Also, if I set the ExpandLevels parameter to 1 or 2 etc, the submenus are dynamically shown on mouseover - I want them to be static and shown the whole time.

So, can the above be done or am I stuck with just the siblings of the current page as the best option, or perhaps children of the current page?

Apologies for the somewhat rambling post!

Thanks in advance,

Dan