Я пытаюсь показать дополнительный список <ul> на первом элементе навигации при наведении курсора:
Все работает за исключением случаев, когда вы находитесь между заполнением первой строки <ul> элемента и вложенного <ul> элемента, вторичный <ul> исчезнет:
Как сохранить открытый список вторичной навигации при переходе от раскрывающегося списка к списку элементов?
JSFiddle
<ul class="w-full">
<li class="dropdown inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide">
<a>Dropdown</a>
<div class="dropdown-menu absolute hidden h-auto flex pt-4">
<ul class="block w-full bg-white shadow px-12 py-8">
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 2</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 3</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 4</a></li>
<li class="py-1"><a class="block text-purple-500 font-bold text-base uppercase hover:text-purple-700 cursor-pointer">Item 5</a></li>
</ul>
</div>
</li>
<li class="inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
<li class="inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide"><a>Non-Dropdown</a></li>
<li class="inline px-4 text-purple-500 hover:text-purple-700 cursor-pointer font-bold text-base uppercase tracking-wide lg:pr-8"><a>Non-Dropdown</a></li>
</ul>
.dropdown:hover .dropdown-menu {
display: block;
}