cssのプルダウンメニューで文字が重なる

Question

困りごと

お世話になっています。

初心者すぎて恥ずかしい限りですが、
cssでテキストプルダウンメニューを作成していますが
cssをいまいち把握できていないため、
どうしても最初のメニューにサブメニューが被ってしまい
うまく下に表示することが出来ません。

環境は最新の node.js + express.js でejsを使って出力しています。

該当のソースコード

ul.menu{
	float: right;
	padding: 0 0 0 15px;
}
ul.menu li{
	display: flex;
	list-style-type: none;
	line-height: 30px;
	position: relative;
}
ul.menu a{
	color: orangered;
	font-weight: bold;
	text-decoration: none;
	display: block;
}
ul.menu a:hover{
	background-color: orangered;
	color: #fff;
}
ul.menu ul{
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
}
ul.menu li:hover ul{
	display: block;
}

<ul class="menu">
<li>ようこそ <a href="#">hoge</a>さん
	<ul>
		<li><a href="#">honyarara</a></li>
		<li><a href="#">fugafuga</a></li>
		<li><a href="#">hongee</a></li>
	</ul>
</li>
</ul>

名前にマウスを合わせると

名前にサブメニューが被ってしまいます。

補足情報

このメニューの直下には、実際にはグラフが表示されており、
margin-top や padding-bottom などの使ってしまうと、
グラフも下がってしまったりと、
グラフにも影響が出てしまうので
文字だけ重ならないようしたいです。

すいませんが、ご教示ください。

Answer 1

ul.menu ulの配置位置を少し下にずらしましょうか。
たとえば、top:30px を追加して下記のようにするのはいかがですか？

ul.menu ul {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
}

Comments

[HYDESA]

おお！
キレイに表示されました！
ありがとうございました、助かりました。