Javascript 如何使此下拉菜单在悬停时打开和关闭

我想在鼠标悬停时打开这个下拉菜单。我曾尝试用onclick命令打开这个下拉菜单，但没有完全成功，所以我决定在悬停时创建下拉菜单

CSS:

。下拉菜单{
左：-50px；
最小宽度：40px；
}
.自定义菜单按钮{
位置：绝对位置；
顶部：0px；
右：40px；
光标：指针；
填充：10px；
高度：50px；
宽度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.自定义菜单按钮：悬停{
背景色：#F0EEEE；
}
.自定义菜单控制{
位置：相对位置；
}
.自定义-菜单-继续隐藏{
显示：无；
}
.自定义菜单继续显示{
显示：内联块；
}
.自定义菜单{
最小高度：350px；
宽度：327px；
位置：绝对位置；
边框：1px实心#bfbf；
边界顶部：无；
右：40px；
顶部：0px；
盒子阴影：0px 6px 12px 0px rgba（0,0,0,0.176）；
背景色：白色；
填充：28px；
}
.向上箭头{
宽度：7px；
高度：7px；
左边框：6px实心透明；
右边框：6px实心透明；
边框底部：7px纯白；
位置：绝对位置；
右：17px；
顶部：-7px；
}
.自定义菜单控制{
z指数：3；
}
.自定义菜单项{
边框：1px纯白；
显示：内联块；
宽度：87px；
填充：10px0；
文本对齐：居中；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.自定义菜单项a{
颜色：#7373；
文字装饰：无；
大纲：无；
}
.自定义菜单项img{
显示：块；
保证金：0自动5px自动；
高度：自动；
宽度：自动；
最大高度：50px；
最大宽度：60px；
}
.自定义菜单项p{
高度：28px；
边际：0px；
}
.自定义菜单项：悬停{
边框：1px实心#e7e7e7；
}
.自定义菜单按钮颜色{
背景色：#e7e7e7；
}

HTML:

更多关于

---

怎么做？

您的代码不完整。但是，我可以给你举个简单的例子

主要思想是当光标离开

dropdownbtn

时，设置

display:none

的

dropdownbtn

。当光标悬停在其上时，将

下拉内容设置为
display:block


.dropbtn{
背景色：#ccc；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#ddd；}
.dropdown:hover.dropdown内容{display:block；}
.dropdown:hover.dropbtn{背景色：#aaa；}

菜单
CSS：

HTML:


菜单


更多关于

希望这会对您有所帮助。
您也可以共享您的css吗？菜单按钮中的隐藏命令会产生很多问题。所以，请提供与问题代码相关的答案。
.menuBtn
{
    background-color: #ccc;
    color: #fff;
    padding: 10px 50px;
    font-size: 16px;
    border: none;
}
.custom-menu 
{
    position: relative;
    display: inline-block;
}
.custom-menu-item
{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.custom-menu:hover .custom-menu-item 
{
    display: block;
}
.custom-menu-item a
{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}           
.custom-menu-item a:hover
{
    background-color: #e7e7e7;
}
.custom-menu:hover .menuBtn 
{
    background-color: #aaa;
}

<div class="custom-menu">
            <button class="menuBtn">Menu</button>
            <div class="custom-menu-item">
                <a href="http://blog.fossasia.org" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}">
                    </span>
                    <span class="custom-title">Blogs</span></a>
                <hr style="margin-bottom: 10px; margin-top: 10px;">
                <a href="https://susper.com/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}">
                    </span>
                    <span class="custom-title">Susper</span></a>
                <a href="https://chat.susi.ai/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}">
                    </span>
                    <span class="custom-title">Susi</span></a>
                <a href="https://loklak.org/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}">
                    </span>
                    <span class="custom-title">loklak</span></a>
                <a href="https://phimp.me/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}">
                    </span>
                    <span class="custom-title">Phimp.me</span></a>
                <a href="https://pslab.fossasia.org" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}">
                    </span>
                    <span class="custom-title">PS Lab</span></a>
                <hr style="margin: 10px">
            <div>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;More on</span><a href="https://labs.fossasia.org/" target="_blank">labs.fossasia.org</a>
            </div>
        </div>
    </div>