（参考サイト） https://neuneko.com/

index.html

<ul class="g_nav">
                            <li class="g_nav_item menu_single"><a href="#" class="init-bottom">BRANDS</a>
                                <ul class="menu_second_level">
                                    <li class="menu_second_level_item"><a href="#">KOBEDO</a></li>
                                    <li class="menu_second_level_item"><a href="#">COUNTRY</a></li>
                                    <li class="menu_second_level_item"><a href="#">KOBEDOG</a></li>
                                </ul>
                            </li>
                        </ul>

style.css

/* ドロップダウンメニュー */
ul.menu_second_level {
  visibility: hidden;
  opacity: 0;
  z-index: 10;
}

.g_nav_list > li:hover {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.g_nav_list {
  *zoom: 1;
}

.g_nav_list > li.menu_single {
  position: relative;
  padding-bottom: 0.5rem;
}

li.menu_single ul.menu_second_level {
  text-align: center;
  position: absolute;
  left: -2.7rem;
  width: auto;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  padding: 1.5rem;
}

li.menu_single:hover ul.menu_second_level {
  top: 2.9rem;
  visibility: visible;
  opacity: 1;
  border-radius: 5px;
}

.menu_second_level_item + .menu_second_level_item {
  margin-top: 0.5rem;
}