I’m using Tailwind css to create a multilevel menu (menu with submenu)

Here’s what I did

• I set overflow-x to auto on the main menu because it contains many items
• I set position to relative on each items on the main menu
• I set position to absolute on the submenu so it shows right next to each item of the main menu

Here’s the code

<div className="w-80 bg-white shadow">
  <ul className="h-96 overflow-y-auto">
    {objectCategories.map((objectCategory) => (
      <li key={objectCategory.name} className="relative group">
        <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-100 focus:outline-none">
          <span>{objectCategory.name}</span>
          <HiChevronRight />
        </button>

        <ObjectClassesFilter
          className="absolute left-full top-0 bg-white shadow-lg hidden group-hover:block z-10"
          objectCategoryName={objectCategory.name}
          objectClasses={objectCategory.objectClasses}
        />
      </li>
    ))}
  </ul>
</div>

The problem is an unwanted horizontal scrollbar appears and the items of the submenu shows on the left of the scrollbar

Expected behavior is to have the submenu on the right of the vertical scrollbar.