Jquery mmenu sub panel with div instead of ul

Question

I'm using the excellent Jquery mmenu plugin to create sliding menus. I have a normal menu of ul with li tags and submenus with ul and li works fine, but I'd like to have a submenu that's more like a sub panel that has general content. I can't get it to slide in like a sub panel.

Here's a snippet of the code:

<nav id="my-menu">
<ul>
    <li><a href="/">Home</a>
    </li>
    <li> <a href="/about/">About with ul THIS WORKS FINE</a>
        <ul>
            <li><a href="/about/history/">History</a>
            </li>
            <li><a href="/about/team/">The team</a>
            </li>
            <li><a href="/about/address/">Our address</a>
            </li>
        </ul>
    </li>
    <li> <a href="#div-slide">About with div HOW CAN I GET THIS TO SLIDE IN??</a>
    </li>
</ul>
</nav>
<div style="display:none">
    <div id="div-slide">
        <h1> About </h1>
        <a href="#"> close </a>
    </div>
</div>

<div id="header"> <a class="menu-icon" href="#my-menu"></a>

</div>
<div></div>

Here's a jsfiddle. http://jsfiddle.net/4xQw6/1/

I found this solution, which worksgreat for opening a div panel. But, the href="#mm-m0-p0" which closes the div panel feels like an undocumented hack. There should be a better way.

<nav id="my-menu">
<ul>
    <li><a>Home</a></li>
    <li>
        <a href="#">Login</a>
        <div class="Panel">                      
           <a class="close" href="#mm-m0-p0">X</a> 
           <h3>Login form...</h3>
        </div>
    </li>
</ul>

Answer 1

You don't need to use a div. You can simply style the li as desired. Add a css class to the li, and apply the desired format.

.liClass {
  display:block; // this will make the li behave like a div
  // add extra formatting here
}

I don't how you want the li to look exactly, but you can get it done with the appropriate CSS styles.