JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
</div>

CSS

li > ul {
  display: none;
}
li:hover > ul {
  display: block;
}

JavaScript

function menuToElement(menu) {
    const ul = document.createElement("ul");
    for (const item of menu) {
        const li = document.createElement("li");
        if (Object(item) === item) {
            li.textContent = item.text + ' \u25BD';
            li.appendChild(menuToElement(item.children));
        } else {
            li.textContent = item;
        }
        ul.appendChild(li);
    }
    return ul;
}

var categories = [{ 
    text: "engine",
    children: [1,2,3, { 
        text: "piston",
        children: [4,5,6, { 
        text: "piston",
        children: [4,5,6]
    }]
    }]   
}, {
    text: "tire",
    children: [7,8,9]
}];
const ul = menuToElement(categories);
document.getElementById("menu").appendChild(ul);