Hover "Drop Right" Menu

I am trying to implement a side-menu that would expand a "table" of items when you hover over one of its items. I’m using TailwindCSS and React.

The problem I’m facing is that the menu does not expand when I hover over the button.

I’ve made the sub-menu a child of the button so that I could use the group-hover functionality, but it does not work. I already added display: ['hover', 'focus'] to the variants config, so, that can’t be the problem.

// SideMenuItem.js

import React from "react";

function SideMenuItem() {
  return (
    <button className="group static m-2 w-16 h-16 bg-red-400"> A
    
      <div className="hidden group-hover:block relative top-0 left-24 w-48 z-10 flex flex-row flex-wrap bg-gray-300">
        <button className="m-2 h-16 w-16 bg-gray-200">Item 1</button>
        <button className="m-2 h-16 w-16 bg-gray-200">Item 2</button>
        <button className="m-2 h-16 w-16 bg-gray-200">Item 3</button>
      </div>
    </button>
  );
}

export default SideMenuItem;

Desired Output:

enter image description here

107 thoughts on “Hover "Drop Right" Menu”

Leave a Comment