Menu (Dropdown) Having some background transparency.

[dela-dels]

Hi guys, so I'm using the Menu (Dropdown) component and I have noticed that there is some transparency in the background when the menu dropdown becomes visible. I've tried to figure out why this is the case but I've not been successful. Has any one run into this issue?

This is my code

  <td className="px-6 py-6 text-sm font-normal tracking-wider text-left">
                      <Menu
                        as="div"
                        className="relative inline-block text-left"
                      >
                        <div>
                          <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
                            Options
                          </Menu.Button>
                        </div>
                        <Transition
                          enter="transition ease-out duration-100"
                          enterFrom="transform opacity-0 scale-95"
                          enterTo="transform opacity-100 scale-100"
                          leave="transition ease-in duration-75"
                          leaveFrom="transform opacity-100 scale-100"
                          leaveTo="transform opacity-0 scale-95"
                        >
                          <Menu.Items className="absolute right-0 w-56 mt-2 origin-top-right bg-blue-600 divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                            <div className="px-1 py-1 ">
                              <Menu.Item>
                                <button className="flex items-center w-full px-2 py-2 text-sm rounded-md group">
                                  View Details
                                </button>
                              </Menu.Item>
                            </div>
                            <div className="px-1 py-1 ">
                              <Menu.Item>
                                <button className="flex items-center w-full px-2 py-2 text-sm rounded-md group">
                                  Edit Pickup
                                </button>
                              </Menu.Item>
                            </div>
                            <div className="px-1 py-1 ">
                              <Menu.Item>
                                <button className="flex items-center w-full px-2 py-2 text-sm rounded-md group">
                                  Edit
                                </button>
                              </Menu.Item>
                            </div>
                          </Menu.Items>
                        </Transition>
                      </Menu>
                    </td>

This is the result below. Had to make the background a solid color to communicate the issue.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

It's actually the other way around, the options button has some opacity and it is sitting on top of your Menu.Options. Try to add a z-10 for example onto the Menu.Items and see if that works for you.

[dela-dels]

Hey, @RobinMalfait can confirm adding a z-index on the Menu.Items solved my issue. Thanks very much. Much Appreciated!