Encapsulating nested lists when loading list dynamically

Question

Hi all,

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>
                            <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------------

Answer 1

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...