Navigation Menu on hover, Navigation Menu Content disappears before clicking

[Srabon444]

Hi there,

I am having this issue for few days, when I try to hover over the navigation menu which has navigation menu content, the navigation menu content (list) disappears when I try to I can click on the list items. Please help. Its driving me crazy, when I see in the shadcn doc it works fine.

                <NavigationMenu>
                  <NavigationMenuList className="flex items-center space-x-6 whitespace-nowrap">
                    {navigationItems.map((item) => (
                      <div key={item.title} className="flex items-center">
                        {item.items ? (
                          <NavigationMenu>
                            <NavigationMenuList>
                              <NavigationMenuItem>
                                <NavigationMenuTrigger className="rounded-none bg-transparent text-sm font-normal leading-[15.6px] text-white transition-all duration-300 hover:border-b hover:border-b-white">
                                  {item.title}
                                </NavigationMenuTrigger>
                                <NavigationMenuContent className="z-999999">
                                  <ul className="grid w-48 gap-3 bg-white p-4">
                                    {item.items.map((subItem) => (
                                      <li key={subItem.title}>
                                        <Link
                                          href={subItem.href}
                                          className="block select-none rounded-md p-3 text-xs font-medium capitalize leading-[17.6px] text-baseBlack hover:text-primary-500"
                                        >
                                          {subItem.title}
                                        </Link>
                                      </li>
                                    ))}
                                  </ul>
                                </NavigationMenuContent>
                              </NavigationMenuItem>
                            </NavigationMenuList>
                          </NavigationMenu>
                        ) : (
                          <Link
                            href={item.href}
                            className={`rounded-none px-4 py-2 text-sm text-white transition-all duration-300 hover:border-b hover:border-b-white ${
                              pathname === item.href ? "font-medium" : ""
                            }`}
                          >
                            {item.title}
                          </Link>
                        )}
                      </div>
                    ))}
                  </NavigationMenuList>
                </NavigationMenu>
              </div>```


```export const navigationItems = [
  { title: "Home", href: "/" },
  {
    title: "All Services",
    items: [
      { title: "Ambulance", href: "/all-services/ambulance" },
      { title: "Pet Ambulance", href: "/all-services/pet-ambulance" },
      { title: "Medicine", href: "/pet-ambulance" },
      { title: "Lab Test", href: "/pet-ambulance" },
      { title: "Skilled Professional", href: "/pet-ambulance" },
      { title: "Equipment Hire", href: "/pet-ambulance" },
      { title: "Doctor Appointment", href: "/pet-ambulance" },
    ],
  },
  { title: "Our Partners", href: "/our-partners" },
  { title: "About Us", href: "/about" },
  { title: "Blog", href: "/blog" },
  { title: "Career", href: "/career" },
  { title: "Contact us", href: "/contact" },
  {
    title: "Others Menu",
    items: [
      { title: "Complain Box", href: "/others-menu/complain-box" },
      { title: "AmbuFast Club", href: "/others-menu/ambufast-club" },
    ],
  },
];```