<div data-theme="dark" class="h-full flex w-full flex-col items-center justify-center bg-[#1a1d21]">
  
      <div class="dropdown dropdown-bottom dropdown-center mb-20">
        <div tabindex="0" role="button" class="btn btn-outline">
          Click me
        </div>
        <ul tabindex="0" class="dropdown-content menu menu-horizontal bg-base-100 rounded-box z-1 w-max p-2 shadow-sm">
          <li>
            <a>SubItem 1</a>
          </li>
          <li>
            <a>SubItem 2</a>
          </li>
          <li>
            <a>SubItem 3</a>
          </li>
        </ul>
      </div>
  

      <ul class='menu bg-base-100 rounded-box w-56 mb-20'>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li id="dropdown-item" class='dropdown-right'>
          <a class='flex justify-between'
            >Item 3

            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='16'
              height='16'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='2'
              stroke-linecap='round'
              stroke-linejoin='round'
              class='lucide lucide-chevron-right'><path d='m9 18 6-6-6-6'></path></svg
            >
          </a>
          <ul id="nested" class='dropdown-content menu bg-base-100 rounded-box absolute z-1 ml-0 hidden data-open:flex w-52 p-2 shadow-sm'>
            <li><a>SubItem 1</a></li>
            <li><a>SubItem 2</a></li>
            <li><a>SubItem 3</a></li>
          </ul>
        </li>
      </ul>
  
      <ul class='menu bg-base-100 rounded-box w-56'>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li class='dropdown-right dropdown-center hover:[&>ul]:flex'>
          <a class='flex justify-between'
            >Item 3

            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='16'
              height='16'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='2'
              stroke-linecap='round'
              stroke-linejoin='round'
              class='lucide lucide-chevron-right'><path d='m9 18 6-6-6-6'></path></svg
            >
          </a>
          <ul class='dropdown-content menu bg-base-100 rounded-box absolute z-1 ml-0 hidden data-open:flex w-52 p-2 shadow-sm'>
            <li><a>SubItem 1</a></li>
            <li><a>SubItem 2</a></li>
            <li><a>SubItem 3</a></li>
            <span class="safeAreaElement bg-blue-500" />
          </ul>
        </li>
      </ul>
</div>

.safeAreaElement {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 99%;
  width: 100%;
  padding: 0;
  clip-path: path("M 208 0 S 208 42 , 0 42 L 208 42 L 208 0 M 208 115 S 208 73 , 0 73 L 208 73 L 208 115");
}

document.body.classList.add('bg-[#1a1d21]', 'h-screen');

let timer;

const dropdownItem = document.getElementById("dropdown-item");
const nestedMenu = document.getElementById("nested");

dropdownItem.addEventListener('mouseenter', () => {
      clearTimeout(timer);
  
      nestedMenu.setAttribute('data-open', "");
});

dropdownItem.addEventListener('mouseleave', () => {
  timer = setTimeout(() =>
      nestedMenu.removeAttribute('data-open'), 200
  );
})