I am using the following to render the DNN Nav Menu as an unordered list in DNN 5.02.03.

<dnn:nav id="dnnNAV" csscontrol="mainMenu" providername="DNNMenuNavigationProvider" runat="server">
  <customattributes>
    <dnn:customattribute value="UnorderedList" name="RenderMode" />
  </customattributes>
</dnn:nav>

This method seems to work well.  If I view the source code, it display the menu as expected in the following manner.

<ul>
    <li><a href="#">Main Link 1</a></li>
    <li><a href="#">Main Link 2</a>
        <ul>
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
        </ul>
    </li>
    <li><a href="#">Main Link 3</a></li>
    <li><a href="#">Main Link 4</a></li>
</ul>

I created styles according to this structure and it works if I copy the source code into a blank html file.  However, 
when I apply the same css to the dnn site, the styles are not reaching the sub menu items (the nested ul). When I 
inspect the menu with Firebug in Firefox, I notice that my nested UL tag is no nested but is located beneath the 
main menu code in the following manner
<ul>
    <li><a href="#">Main Link 1</a></li>
    <li><a href="#">Main Link 2</a></li>
    <li><a href="#">Main Link 3</a></li>
    <li><a href="#">Main Link 4</a></li>
    <ul>
        <li><a href="#">Sub Link 1</a></li>
        <li><a href="#">Sub Link 2</a></li>
    </ul>
</ul>


Has anyone come across this?  Is there a way to resolve this issue?

Hi Jeff,

I only use one class at the root of the menu. 

So <ul class="navigation" id="dnn_dnnNAV_ctldnnNAV"> is what get's rendered.

All other styles are applied through nested references... such as

/*Styles the primary nav.*/
ul.navigation li a:link { /*--- styles ---*/ }

/*Styles the drop down menus.*/
ul.navigation li:hover ul li a:link { /*--- styles ---*/ }

Again, the styles work perfectly when I pull the html generated from the DNN Nav menu into a "test" html file, but when I inspect the menu within DNN using Firebug, the html is improperly nested...  It's appears that the html code is getting generated correctly, but repositioned with JavaScript causing my css selectors not to find their intended targets... but that is just a guess.

Let me know if you would like me to post my entire css sheet.

Thanks.

You are right it is rendered that way. You can however styke the menu how you like to using the css the module render.

/*

.m          All Sub Menu                .m      All Sub Menus

.m[level]   Sub Menu at level x         .m0     First level sub menus

.mid[id]    Sub Menu with id x          .mid39  DNN Admin Sub Menu

.break      Break                       .break  All menu breaks

.mi         Menu Item (all)             .mi     All Menu Items

.id         Menu Item with id x         .id41   Menu Item with id 41

.mi[path]   Menu Item in specific path  .mi0    First Menu Item (Home)

                                        .mi1-0  First child of second root menu (Admin-Site Settings)   

.root       Root Menu Item              .root   All root menu items

.first      First Menu Item             .first  First menu item in each menu

.last       Last Menu Item              .last   Last menu item in each menu

                                        .first.last First & Last menu item in each menu

.icn        Icon

.hov        Hover

.sel        Selected

.bc         BreadCrumb

.txt        Menu Text */