Navbar - sub menus remove data role

Navbar - sub menus remove data role

Hi,

I'm using default JQM NAVBAR, however I would like to add a custom sub-level menu list but somehow it inherit JQM styling even I added <div></div>.

  1. <div id="nav1" data-role="navbar">
    <ul>
    <li><a href="#" class="ui-btn">Menu-1</a></li>

    <li><a href="#" class="ui-btn">Menu-2</a>
    <div>
    <ul>
    <li><a href="#" class="ui-btn">Sub-1</a></li>
    <li><a href="#" class="ui-btn">Sub-2</a></li>
    </ul>
    </div>
    </li>

    <li><a href="#" class="ui-btn">Menu-3</a></li>
    </ul>
    </div>


I would like to "remove" default JQM styling so I can customize my own styling. The sub menus block will be position:absolute. As I am unable to get the styling right, so

I also tried added data-role="none" and data-enhance="false" but none seems to work.

Also I tried to move sub menus block to be outside of main menu's UL within DIV NAVBAR, still same thing.

Any solutions? Thanks for advance.