Correct syntax for Definition List (<dl>) in jQuery UI's Nested Menu?

Correct syntax for Definition List (<dl>) in jQuery UI's Nested Menu?

I’m trying to combine jQuery UI’s nested menu with definition list ( <dl>) elements, but I'm having trouble figuring out the correct syntax because a nested menu starts with <ul> and a definition list starts with <dl>.

My reason for doing this is to create nested dropdown boxes, and I'm using the script and css in this fiddle to have the DL elements look and act like dropdown boxes.

This code is the closest I've gotten, but it's not quite right because when the <dl> element is clicked, instead of only showing the dt elements (Coffee, Soft Drinks, Water), it quickly shows all of the list items before collapsing the way it should to only show the dt elements.





    <dl class="dropdown">
    <dt><a href="#"><span>Drinks</span></a></dt>
    <dd>
    <ul id="drinks">
        <li>       
        <a href="#">Coffee</a>
            <ul>              
            ...   
            </ul>
        </li>
        <li><a href="#">Soft Drinks</a></li>
        <li><a href="#">Water</a></li>       
    </ul>
    </dd>
    </dl>