https://thewppress.com/libraries/implement-submenu-as-dropdown-list-on-the-navigation/
一部上記ありがたいコードをコピペ
menuをheader_menu_wrap で囲っておけばとりあえず形になる
.header_menu_wrap .menu{
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
text-align:center;
}
.header_menu_wrap .menu li a{
display:block;
color:#000;
padding:10px 15px;
}
/* サブメニューをabsoluteにするため、親メニューをrelativeに */
.menu-item-has-children {
position: relative;
}
/* 親メニューにマウスオーバーしたときにカーソルを変更 */
.menu-item-has-children:hover {
cursor: pointer;
}
/* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */
.menu-item-has-children:hover .sub-menu {
display: block;
}
/* サブメニューをabsoluteにして親メニューの下に配置。スタイルは適宜調整してください */
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 200px;
background: white;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
padding: 0;
}
/* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */
.sub-menu > .menu-item:not(:last-child) {
border-bottom: 1px solid #eee;
}
/* サブニューのリンクタグをmenu-itemの大きさと合わせ、クリックしやすいようにした */
.sub-menu > .menu-item a {
display: inline-block;
width: 100%;
height: 100%;
padding: .5em 0;
}
/* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */
.sub-menu > .menu-item a:hover {
background: black;
color: white;
}