.menu {
    text-align: center;
}

/* 親メニューをinline-blockにしてセンターに配置 */
.menu>.menu-item {
    display: inline-block;
    padding: .5em .3em;
}

/* リストの記号を消去 */
.menu-item {
    list-style-type: none;
}

/* サブメニューを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: rgb(225 225 225 / 90%);
	box-shadow: 0px 0px 3px rgb(0 0 0 / .8);
    padding: 0;
	z-index:10000
}

/* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */
.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: rgb(120  120 120 / 90%);
	color: white;
}