メニューアイコンの位置が :hover 時に勝手にずれてしまう問題を解決したいです。

Question

解決したいこと

お世話になります。

メニューアイコンの位置が :hover 時に上にずれてしまう問題を解決したいです。
１枚目の画像が通常の状態、２枚目が :hover が適応された状態です。

ご助力のほど、なにとぞよろしくお願いいたします。

該当のソースコード

<div class="table-head">
	<span class="title-column">Name</span>
	<span class="modified-column">Last Modified</span>
</div>
<ul class="table-body">
	<% memos.forEach((memo) => { %>
		<li>
			<span class="title-column"><%= memo.title %></span>
			<div class="items">
				<span class="modified-column"><%= memo.modified %></span>
				<div class="icon-area">
					<div class="menu-icon">
						<div></div>
						<div></div>
						<div></div>
					</div>
					<ul class="menu-content">
						<li><a href="/edit/<%= memo.id %>">Edit</a></li>
						<li><form action="/remove/<%= memo.id %>" method="post">
								<input type="submit" value="Remove">
							</form></li>
					</ul>
				</div>
			</div>
		</li>
		<% }); %>
</ul>

/* table */
.table-head {
	display: flex;
	background-color: #fff;
	border-radius: 2px 2px 0 0;
	padding: 0 30px;
	height: 4.5em;
	font-size: 1em;
	color: #6b1d1e;
	border: 1px solid #ffeeee;
	border-bottom: 1px solid #f9dee0;
}

.title-column {
	width: 70%;
	text-align: left;
	padding: 0;
	margin: auto;

}

.modified-column {
	width: 30%;
	margin: auto;
}

.table-body {
	background-color: #ffffff;
	padding: 0 30px;
	border-radius: 0 0 2px 2px;
	border: 1px solid #ffeeee;
	border-top: none;

}

.table-body li {
	height: 4.5em;
	border-top: 1px solid #F9F0F2;
	display: flex;
}

.table-body li:first-child {
	border: none;
}

.table-body .title-column {
	font-size: 1em;
	color: #A6858E;
}

.items {
	width: 30%;
	display: flex;
}

.items .modified-column {
	width: 80%;
	font-size: 0.75em;
	letter-spacing: 0;
	color: #D4BAC0;
}

.icon-area {
	position: relative;
	width: 20%;
	padding: 12px 10px;
	margin: auto;
	height: 1em; /* Lhankor_Mhy様に頂いた回答を受けて追加しました */
}

.menu-icon div {
	width: 3px;
	height: 3px;
	background-color: #D4BAC0;
	margin: 3px auto;
	border-radius: 100px;
}

.icon-area:hover .menu-icon div {
	background-color: #A6858E;
	transition: all 0.3s ease;
}

.menu-content {
	z-index: 9;
	display: none;
	margin: 0;
	padding: 0;
	position: sticky;
}

.icon-area:hover .menu-content {
	display: block;
	width: 120px;
	transform: translateX(calc(-50% + 6px));
	margin-top: 12px;
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #f9dee0;
}

.memu-content li {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #f9dee0;
}

.menu-content li:first-child {
	border: none;
}

.menu-content form, .menu-content a {
	text-align: center;
	margin: auto;
	width: 100%;
}

.menu-content input {
	margin: 0 auto;
	border: none;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	font-size: 0.75em;
	letter-spacing: 0;
	color: #D4BAC0;
	background-color: transparent;
}

.menu-content a {
	font-size: 0.75em;
	letter-spacing: 0;
	color: #D4BAC0;
}

.menu-content input:hover, .menu-content a:hover {
	color: #FF8080;
}

.footer {
	z-index: 8;
	width: 100%;
	height: 60px;
	top: 100vh;
	position: sticky;
}

試したこと

.menu-content に position: sticky; を指定しているのが原因かと思い、 .icon-area にも position プロパティをいくつか試してみたのですが（relative, absolte, fixed, sticky）、どうやら関係なかったようです。

補足情報（FW/ツールのバージョンなど）

下の画像は、頂いた情報を元に height プロパティを追加した後のテーブルの全体像です。

作業環境は Windows11 、使用ブラウザは Chrome です。
その他、もしご入用の情報があれば仰ってくださいませ。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが問題が再現しませんでした。おそらく、icon-area の外側の要素との関係で発生するのだろうと思います。

なんとなくですが、ホバーすると icon-area の高さが増えていますので、そのあたりの影響だろうな、という気がしています。

Answer 1

ご提示のコードだけでは問題が再現しなかったのですが、.icon-areaの兄弟に『Sep 14 23 19 : 26』などのテキストを入れ、共通の親要素に

parent {
  display: flex;
  align-items: center;
}

などとすると、問題が再現しました。

この場合、以下のようにすると問題が解決しました。

.icon-area {
  position: relative;
  width: 20%;
  padding: 12px 10px;
  margin: auto;
  height: 1em; /* これ */
}

Comments

[kanon_2155103]

ご回答いただきありがとうございます。
反応が遅れてしまい申し訳ありません。

アドバイスを頂いた通りにしてみたところ、:hover 時にアイコンが動くことは無くなりましたが、常に下に居座るようになってしまいました。補足情報の画像をご参照いただけますと幸いです。
他のプロパティや親要素とも照らし合わせてみたのですが、原因を見つけることができず……。

ソースコードの範囲を広げて記載し直しましたので、今しばらくお付き合いいただけますでしょうか。
恐れ入りますが、どうぞよろしくお願いいたします。

[kanon_2155103]

また、:hover 時に icon-area の高さが増える要因については分かりませんでした。
分からないことだらけですみません。

[Lhankor_Mhy]

height が小さすぎるのだと思いますので、調整されてはいかがでしょうか？ 対応ブラウザに不安がありますが、1lhとかはどうでしょうか？

[kanon_2155103]

ご返信いただきありがとうございます！

仰るとおり、.icon-area のスペースが小さすぎたせいで子要素である .menu-icon のスペースが潰れてしまっているのが原因でした。お恥ずかしい限りですが、ご指摘いただくまで全く思い当たらずにおりました……。
.icon-area に指定していた padding プロパティの分も含めると、1.67lh が丁度良かったです。

CSSには元々苦手意識が強かったのですが、おかげさまで少し理解が深まりました。
ご丁寧にお付き合いいただけましたこと、重ねてお礼申し上げます。

[Lhankor_Mhy]

ご解決されて何よりです。