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

我想打开鼠标悬停在它上面的下拉菜单。我试图用onclick命令打开这个下拉菜单,但是我没有完全成功,所以我决定在悬停时创建下拉菜单。

CSS:

.dropdown-menu {
  left: -50px;
  min-width: 40px;
}

.custom-menubutton {
  position: absolute;
  top:0px;
  right: 40px;
  cursor: pointer;
  padding: 10px;
  height:50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-menubutton:hover {
  background-color:#F0EEEE;
}

.custom-menu-cont {
  position: relative;
}

.custom-menu-cont.hidden {
  display: none;
}

.custom-menu-cont-shown {
  display: inline-block;
}

.custom-menu {
  min-height: 350px;
  width: 327px;
  position: absolute;
  border: 1px solid #bfbfbf;
  border-top: none;
  right: 40px;
  top: 0px;
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.176);
  background-color: white;
  padding:28px;
}

.arrow-up {
  width: 7px;
  height: 7px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid white;
  position: absolute;
  right:17px;
  top:-7px;
}

.custom-menu-cont {
  z-index: 3;
}
.custom-menu-item {
  border: 1px solid white;
  display: inline-block;
  width: 87px;
  padding: 10px 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.custom-menu-item a {
  color: #737373;
  text-decoration: none;
  outline: none;
}

.custom-menu-item img {
  display: block;
  margin: 0 auto 5px auto;
  height: auto;
  width: auto;
  max-height: 50px;
  max-width: 60px;
}

.custom-menu-item p {
  height:28px;
  margin:0px;
}

.custom-menu-item:hover {
  border:1px solid #e7e7e7;
}

.custom-menubutton-color {
  background-color: #e7e7e7;
}

HTML:

<div class="custom-menubutton">
      <i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
    </div>
  </div>
  <div class="custom-menu-cont hidden">
    <div class="custom-menu">
      <div class="arrow-up"></div>
      <div>
        <div class="custom-menu-item">
          <a href="http://blog.fossasia.org" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
          <p class="custom-title">Blogs</p></a>
        </div>
        <hr style="margin-bottom: 10px; margin-top: 10px;">
        <div class="custom-menu-item">
          <a href="https://susper.com/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
          <p class="custom-title">Susper</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://chat.susi.ai/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
          <p class="custom-title">Susi</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://loklak.org/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
          <p class="custom-title">loklak</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://phimp.me/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
          <p class="custom-title">Phimp.me</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://pslab.fossasia.org" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
          <p class="custom-title">PS Lab</p></a>
        </div>
        <hr style="margin: 10px">
        <div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
          More on&nbsp;<a href="https://labs.fossasia.org/" target="_blank" style="text-decoration: none;color: #737373"> labs.fossasia.org</a>
        </div>
      </div>
    </div>
  </div>

请根据问题提供答案。请不要提供解决问题的提示。

怎么做?

提前谢谢。