<!-- navigation-template.hbs -->
<nav class="relative z-50">
<ul class="flex justify-between pl-5 uppercase font-talke-semibold" x-data="">
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
Carus
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Adflicto tardus
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
debeo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
deleo
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Una ulciscor
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
vir
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
acquiro
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
patria
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Truculenter benevolentia
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
soluta
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
creo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
corona
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
delego
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
Sto
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Stultus adficio
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
adiuvo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
adfectus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
eius
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
tenus
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Curvo suggero
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
nobis
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
tonsor
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
absum
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
thymum
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Adfectus neque
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
aqua
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
eos
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
occaecati
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
administratio
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Tendo aeneus
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
calamitas
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red">
Deprimo
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<a href="#" class="flex items-center justify-between p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
Tametsi adsidue
</a>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Amet vis
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
viridis
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
ad
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
vociferor
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
coniecto
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Dolorem cursus
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
terga
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
vulgo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
paens
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Bis curto
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
demo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
pectus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
fuga
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
fuga
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Careo denuo
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
usus
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Campana contigo
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
defendo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
excepturi
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
crastinus
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
Debilito
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Creta ullus
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
derideo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
uberrime
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
ullus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
coma
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Dolorum spargo
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
alius
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Canto fugiat
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
aestus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
sint
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Vorago absque
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
sum
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
tantum
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
stips
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
Cohibeo
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Cinis vinculum
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
paulatim
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
anser
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
aptus
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Cito optio
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
summa
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
statua
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Thymbra certe
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
adulatio
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
Debitis
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Animus iure
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
ago
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
annus
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<a href="#" class="flex items-center justify-between p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
Vesper arbitro
</a>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Commodi aut
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
labore
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
civis
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Coerceo adeptio
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
cohaero
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
accendo
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
textilis
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
demonstro
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Teres inventore
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
curtus
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" @mouseenter="
dropdownToggle($el);" @mouseleave="
dropdownToggle($el);">
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
Tredecim
<svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Absorbeo astrum
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
possimus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
denique
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
stella
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
tum
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
expandSubMenu($el);">
Virtus deduco
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
pecto
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
ullam
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
suus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
carus
</a>
</li>
</ul>
</li>
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
<span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
expandSubMenu($el);">
Defluo considero
<svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
<path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
</svg>
</span>
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
acidus
</a>
</li>
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
argentum
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!-- navigation-template.hbs -->
<nav class="relative z-50">
<ul
class="flex justify-between pl-5 uppercase font-talke-semibold"
x-data=""
>
{{#each items as |level0item level0index|}}
<li class="relative"
@mouseenter="
dropdownToggle($el);"
@mouseleave="
dropdownToggle($el);"
>
<span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red {{#ifCond level0index "==" "2"}}text-talke-red{{/ifCond}}">
{{level0item.title}}
{{#if level0item.level1}}
{{> @icon--navigationarrow additionalClasses="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none"}}
{{/if}}
</span>
{{#if level0item.level1}}
<ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
{{#each level1 as |level1item level1index|}}
<li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
{{#if level1item.level2}}
<span
class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red {{#ifCond level1index "==" "2"}}text-talke-red{{/ifCond}}"
@mouseover="
expandSubMenu($el);"
>
{{level1item.title}}
{{> @icon--navigationarrow additionalClasses="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current"}}
</span>
{{#if level1item.level2}}
<ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
{{#each level2 as |level2item level2index|}}
<li>
<a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
{{level2item.title}}
</a>
</li>
{{/each}}
</ul>
{{/if}}
{{else}}
<a href="#" class="flex items-center justify-between p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
{{level1item.title}}
</a>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</nav>
{
"id": "c680",
"items": [
{
"title": "Carus",
"level1": [
{
"title": "Adflicto tardus",
"level2": [
{
"title": "debeo"
},
{
"title": "deleo"
}
]
},
{
"title": "Una ulciscor",
"level2": [
{
"title": "vir"
},
{
"title": "acquiro"
},
{
"title": "patria"
}
]
},
{
"title": "Truculenter benevolentia",
"level2": [
{
"title": "soluta"
},
{
"title": "creo"
},
{
"title": "corona"
},
{
"title": "delego"
}
]
}
]
},
{
"title": "Sto",
"level1": [
{
"title": "Stultus adficio",
"level2": [
{
"title": "adiuvo"
},
{
"title": "adfectus"
},
{
"title": "eius"
},
{
"title": "tenus"
}
]
},
{
"title": "Curvo suggero",
"level2": [
{
"title": "nobis"
},
{
"title": "tonsor"
},
{
"title": "absum"
},
{
"title": "thymum"
}
]
},
{
"title": "Adfectus neque",
"level2": [
{
"title": "aqua"
},
{
"title": "eos"
},
{
"title": "occaecati"
},
{
"title": "administratio"
}
]
},
{
"title": "Tendo aeneus",
"level2": [
{
"title": "calamitas"
}
]
}
]
},
{
"title": "Deprimo",
"level1": [
{
"title": "Tametsi adsidue",
"level2": []
},
{
"title": "Amet vis",
"level2": [
{
"title": "viridis"
},
{
"title": "ad"
},
{
"title": "vociferor"
},
{
"title": "coniecto"
}
]
},
{
"title": "Dolorem cursus",
"level2": [
{
"title": "terga"
},
{
"title": "vulgo"
},
{
"title": "paens"
}
]
},
{
"title": "Bis curto",
"level2": [
{
"title": "demo"
},
{
"title": "pectus"
},
{
"title": "fuga"
},
{
"title": "fuga"
}
]
},
{
"title": "Careo denuo",
"level2": [
{
"title": "usus"
}
]
},
{
"title": "Campana contigo",
"level2": [
{
"title": "defendo"
},
{
"title": "excepturi"
},
{
"title": "crastinus"
}
]
}
]
},
{
"title": "Debilito",
"level1": [
{
"title": "Creta ullus",
"level2": [
{
"title": "derideo"
},
{
"title": "uberrime"
},
{
"title": "ullus"
},
{
"title": "coma"
}
]
},
{
"title": "Dolorum spargo",
"level2": [
{
"title": "alius"
}
]
},
{
"title": "Canto fugiat",
"level2": [
{
"title": "aestus"
},
{
"title": "sint"
}
]
},
{
"title": "Vorago absque",
"level2": [
{
"title": "sum"
},
{
"title": "tantum"
},
{
"title": "stips"
}
]
}
]
},
{
"title": "Cohibeo",
"level1": [
{
"title": "Cinis vinculum",
"level2": [
{
"title": "paulatim"
},
{
"title": "anser"
},
{
"title": "aptus"
}
]
},
{
"title": "Cito optio",
"level2": [
{
"title": "summa"
},
{
"title": "statua"
}
]
},
{
"title": "Thymbra certe",
"level2": [
{
"title": "adulatio"
}
]
}
]
},
{
"title": "Debitis",
"level1": [
{
"title": "Animus iure",
"level2": [
{
"title": "ago"
},
{
"title": "annus"
}
]
},
{
"title": "Vesper arbitro",
"level2": []
},
{
"title": "Commodi aut",
"level2": [
{
"title": "labore"
},
{
"title": "civis"
}
]
},
{
"title": "Coerceo adeptio",
"level2": [
{
"title": "cohaero"
},
{
"title": "accendo"
},
{
"title": "textilis"
},
{
"title": "demonstro"
}
]
},
{
"title": "Teres inventore",
"level2": [
{
"title": "curtus"
}
]
}
]
},
{
"title": "Tredecim",
"level1": [
{
"title": "Absorbeo astrum",
"level2": [
{
"title": "possimus"
},
{
"title": "denique"
},
{
"title": "stella"
},
{
"title": "tum"
}
]
},
{
"title": "Virtus deduco",
"level2": [
{
"title": "pecto"
},
{
"title": "ullam"
},
{
"title": "suus"
},
{
"title": "carus"
}
]
},
{
"title": "Defluo considero",
"level2": [
{
"title": "acidus"
},
{
"title": "argentum"
}
]
}
]
}
]
}
No notes defined.