Links: Desktop Nav With Dropdown

<div class="rounded-md lg:ml-6 flex flex-row items-center">
    <ul class="flex flex-row items-center">
        <li>
            <a href="#" class="bg-tertiary-100 rounded-md text-tertiary-700 hover:text-tertiary-500 hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                Tickets
            </a>
        </li>

        <li class="relative">
            <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                Projects
            </a>
        </li>

        <li class="relative">
            <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                Clients
            </a>

            <div class="absolute mt-xsSpace left-0 w-32">
                <div class="bg-white z-10 shadow-lg rounded overflow-hidden ring-1 ring-black ring-opacity-5 origin-top-right focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                    <ul class="text-sm font-medium text-tertiary-500 [&>a]:whitespace-nowrap">
                        <li>
                            <a href="#" class="bg-tertiary-100 block px-smSpace py-xsSpace text-tertiary-700 font-semibold">Sub nav item</a>
                        </li>

                        <li>
                            <a href="#" class="bg-white block px-smSpace py-xsSpace text-tertiary-700 font-semibold">Sub nav item</a>
                        </li>

                        <li>
                            <a href="#" class="bg-white block px-smSpace py-xsSpace text-tertiary-700 font-semibold">Sub nav item</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>

        <li>
            <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                Timesheets
            </a>
        </li>

        <li>
            <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                Reports
            </a>
        </li>

        <li>
            <a href="#" class=" hover:text-tertiary-700 text-sm text-tertiary-700 px-mdSpace py-smSpace lg:px-smSpace lg:py-xsSpace font-semibold inline-flex items-center border-b-2 border-transparent">
                Invoices
            </a>
        </li>
    </ul>
</div>