trying to create a horizontal menu with struct data i have - coldfusion

Question

I have the following type of structure
https://prnt.sc/wkerdv
in the above only the first one has childrens but the possibility is childrens can have childrens and so on, but i prefer to display only 3 levels deep as horizontal menu
i am struk the loop where i had to add the loop properly to create the menu bar, i am trying to create menu like this
https://prnt.sc/wket5s
so here is what i am trying
<cfoutput>
<ul>
<cfloop from="1" to="#arrayLen(data.item)#" index="i">
<cfset x = data.item[i]>
<cfloop collection="#x#" item="key">
<cfif Structkeyexists(key,'Item')>
<cfloop from="1" to="#arrayLen(data.item)#" index="i">
<cfset x = data.item[i]>
<cfelse>
</cfif>
<cfdump var="#key#">
<!--- <cfloop from="1" to="#arrayLen(key.item)#" index="d">
<cfset n = key.item[d]>
<!--- <li>#d#:#n[d]#</li> --->
<cfdump var="#n#">
</cfloop>
<li>#key#:#x[key]#</li>--->
</cfloop>
</cfloop>
</ul>
</cfoutput>
the html code behind the above second screen is like this
<ul class="menu-list">
<cfloop from="1" to="#ArrayLen(data.menu.item)#" index="toplevel">
<li>#toplevel#
</cfloop>
<li class="active">HOME
<ul class="menu-dropdown">
<li>Home One</li>
<li>Home Two</li>
<li>Home Three
<ul class="thirdlevel-menu">
<li>Thirdlevel</li>
<li>Thirdlevel</li>
<li>Thirdlevel</li>
</ul>
</li>
</ul>
</li>
<li>ABOUT</li>
<li>SHOP