Hover on an option element?

Question

Can I hover an option element to show more options? I want to have a dropdown nested component like the following screenshot

I have this array of objects and pass it to the DropDown component, if the first object has a field called modules and it has an array of two objects how can I display it as a nested dropdown?

index.js

import React from "react";
import ReactDOM from "react-dom";
import DropDown from "./DropDown";

const availableModules = [
  {
    text: "environment",
    value: "Environment",
    modules: [{ key: "greenhouse" }, { key: "protected species" }],
  },
  {
    text: "mobility",
    value: "Mobility",
    modules: [
      { key: "walk accessibility" },
      { key: "transit accessibility" },
      { key: "travel patterns" },
    ],
  },
  {
    text: "resiliency",
    value: "Resiliency",
    modules: [{ key: "flood" }, { key: "fire" }, { key: "earthquake" }],
  },
];

ReactDOM.render(
  <DropDown availableModules={availableModules} />,
  document.getElementById("root")
);

Dropdown.js

const DropDown = ({availableModules}) => {


return (
 <div>
   <p>Select Option </p>
      <select >
        {availableModules.map((item, index) => (
            <option
                value={item.text}
                key={index}
            >
            {item.text}
            </option>
        ))} 
    </select>
 </div>
 )
}

Answer 1

Yes, you can. Just render the entire div structure, with all ULs and LIs, and use css to show/hide the menus and submenus.

There is no need to use state for this - showing/hiding via css and detecting hover via css - css alone can handle the job.

On desired LI items, add your click handler as per normal.

<li 
    onClick={handleDoThisParticularThing}
>
    This particular item
</li>

There are many examples online. Just google something like create a nested menu system css

https://css-tricks.com/solved-with-css-dropdown-menus/

https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/