多个带有javascript的下拉菜单。不幸的是，只有“丑陋”才有可能；“暴力”；方法

我用FlexBox和一些非常基本的JavaScript为自己构建了三个下拉菜单。
因为我不太清楚，我三次使用一个简单的函数，而不是使用参数、变量之类的东西。我认为这是一个丑陋的“暴力”解决方案

<div class="menue">
<div onmouseover="open1()" onmouseout="close1()" id="menuepunkt_top">
<img src="#" alt="photography"></div>
<div onmouseover="open2()" onmouseout="close2()" id="menuepunkt_top">
<img src="#" alt="painting"></div>
<div onmouseover="open3()" onmouseout="close3()" id="menuepunkt_top">
<img src="#" alt="shoutout"></div>
</div>

更不用说3个内容相同的巨大css ID了

#menuepunkt_unten_1-3 {...}

好吧，它很有效，你可以在这里查看：

但是有谁能告诉我如何使这个更优雅

---

如果可能的话，我希望能够使用这个JavaScript函数处理所有三个下拉菜单。

基本解决方案包括两个不同的CSS类，一个用于顶部菜单，另一个用于子菜单，您可以迭代顶部菜单的CSS类，并附加onclick事件处理程序

---

在这里，您可以找到一个分步教程：

我投票将此问题作为离题结束，因为这似乎最适合codereview.stackexchange.com虽然我同意这将是在主题上，但在主题上并不是问题离题的原因之一。如果这个问题与主题无关，请投票结束。如果这个问题在上更合适，也许需要一个主持人迁移的标志。一个问题只有在非主题的情况下才应该关闭，而不是因为它可能也在其他地方的主题上。我不知道有一个实际的代码审查部分。很抱歉

#menuepunkt_unten_1-3 {...}