Encapsulating nested lists when loading list dynamically

I'm loading the content of a 3-level dropdown list through a database (same project as my other questions-- clearly i'm just learning the language, sorry). i want the top level to be like a tab menu, with a border around the space below it where the rest of the lists come down. But check my code:

<ul id="catsMenu">
    <cfloop query="getCats">
        <li><h2><span><cfoutput>#getCats.group_name#</cfoutput></span></h2>
            <ul>
                <cfloop query="getMain">
                    <li><cfoutput>#getMain.section_name#</cfoutput>
                        <ul>
                 开发者_JAVA百科           <cfloop query="getDetail">
                                <li><a href="somelink"</a></li>
                            </cfloop>
                        </ul>
                    </li>
                </cfloop>
            </ul>
        </li>
    </cfloop>
</ul>

(i need the getdetail query to know the link its going to)

I can't quite figure out how I would create the box around the whole section below it, then. Should I absolutely position the div, before or after this list code? Not really sure how to go about doing this. Thanks in advance for your help.

EDIT: This is what I'm looking for:

---------------------------------
| Tab 1 | Tab 2 | Tab 3 | etc.. |
---------------------------------
-----DIV W/ BORDER---------------
|  /* dropdown stuff            |
|     goes inside here */       |
|                               |
|                               |
|                               |
-------DIV W/ BORDER------------

Have you considered using jQuery and jQuery-UI for example? http://jqueryui.com/demos/tabs/

If not, then your cf code seems fine, only thing you need to do is to play a little bit with CSS. For example first UL would have float left in order to keep it aligned to rest of the page, inside list elements would have float, also display inline and some paddings, width, height and so on...

Here're the examples http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/ http://daniel.glazman.free.fr/weblog/targetExample.html#others (Use firebug to see how it's done)

If I understood well your question...

Eric,

If I understood your question correct, you should be using the cflayout and cflayoutarea tags. it can easily achive what you have shown in the image.

This link shud give you a simple example.

http://coldfusion-example.blogspot.com/2009/03/how-to-use-cflayout-with-cflayoutarea.html

You may pass value from one cflayoutarea to the next using 'request' scope and submitiing the parent layout area via ColdFusion.navigate().

hope this helps