I'm currently working on a 3-level dropdown list that pulls content from a database for my project. I want the top level to resemble a tab menu, with a border surrounding the area underneath where the additional lists will appear. However, I am facing some challenges with 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 have knowledge of the link it's going to)
My main struggle is figuring out how to implement the box around the entire lower section. Should I use absolute positioning for the div, both before or after this list code? I'm unsure of the best approach to take. Thank you in advance for any assistance.
EDIT: This is the desired structure:
---------------------------------
| Tab 1 | Tab 2 | Tab 3 | etc.. |
---------------------------------
-----DIV W/ BORDER---------------
| /* dropdown stuff |
| goes inside here */ |
| |
| |
| |
-------DIV W/ BORDER------------