ドロップダウンメニューの位置とレイアウトを変更する方法

Question

実現したいこと

お世話になります。
ただいま制作中メモのWEBアプリの中でドロップダウンメニューを実装してみたのですが、そのレイアウトについていくつか行き詰まってしまいました。
どうか、皆様のお知恵をお貸しいただけたらと思います。

1. メモ一覧のページにて、メニューアイコンをクリックしたらその子要素であるドロップダウンが表示される仕組みなのですが、どこのメニューアイコンをクリックしても一番上のメニューアイコンの下に表示されてしまいます。クリックしたメニューアイコンの下に表示するにはどうすればよいですか？

2. ドロップダウンの位置をメニューアイコンの真下に表示したいです。今の状態ではかなり右に寄ってしまっているので……。

3. ドロップダウンのレイアウトを、親要素である .table-body から独立させたいです。例えば .table-body 内の li 要素に height: 72px; を指定しているのですが、それがドロップダウンにも反映されており、.menu-content 内の li 要素に新しく height を指定しても反映されませんでした。

うまく説明できず恐縮ですが、以下の画像をご参照くださいませ。

また、HTML(EJS) における該当のテーブル部分は以下の通りです。

<div class="index-table-wrapper">
	<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">
						<input type="checkbox" id="menu-input"/>
						<label class="menu-icon" for="menu-input">
							<div></div>
							<div></div>
							<div></div>
						</label>
						<ul class="menu-content">
							<li><a href="/edit/<%= memo.id %>">Edit</a></li>
							<li><form action="/delete/<%= memo.id %>" method="post">
									<input type="submit" value="Dlete">
								</form></li>
						</ul>
					</div>
				</div>
			</li>
			<% }); %>
	</ul>
	<div class="footer"></div>
</div>

CSSに関してはかなり長くなってしまうため、メニューアイコンとドロップアウトの周辺のみ記載します。もし他の部分が必要でしたら、お手数ですがコメントを頂けますと幸いです。

.icon-area {
	width: 20%;
	margin: auto;
	padding-right: 10px;
}


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

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

.menu-content {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
}

#menu-input:checked ~ .menu-content {
	display: block;
	width: 120px;
	margin-top: 12px;
	z-index: 1;
	overflow: hidden;
	position: absolute;
	background-color: #fff;
	border: 1px solid #f9dee0;
}

#menu-input {
	display: none;
}

.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;
	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: 12px;
	letter-spacing: 0;
	color: #D4BAC0;
	background-color: transparent;
}

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

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

試したこと

2つめの質問に関しては、以下のサイトを参考に left: 50%; transform: translateX(-50%); を追加してみましたが、以下の画像のようになってしまいました。

また、1つめと3つめについてもそれぞれ "ドロップダウン 位置 可変" や "子要素 height 効かない" などいくつかの言葉で調べてみたのですが、それらしい対処法が書かれたサイトを見つけることが出来ませんでした。

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

HTML のコードは EJS ファイルで書いているため EJS タグを使用しましたが、今回の質問とは特に関係がないかと思われます。

以上、ご教示のほど何卒よろしくお願いいたします。

Answer 1

<input type="checkbox" id="menu-input"/> が繰り返しHTML内に作成されますが、id属性は同一HTML内にて一意である必要があるので、どのlabel要素を押しても最初の <input type="checkbox" id="menu-input"/> が選択されてしまう状態です。

個別に番号を振るなどしてみてはいかがでしょう。
（EJSは私の不勉強のためよくわかりませんが、「forEachの何番目」みたいな情報を使えそうな気がします）

Comments

[kanon_2155103]

ありがとうございます。
なるほど、確かに CSS の疑似クラスで :checked ではなく :hover を用いていたときは問題ありませんでした……！

>個別に番号を振るなどしてみてはいかがでしょう。

重ねて質問してしまい恐縮ですが、こちらは HTML だけで解決可能ですか？
EJS に関しては、実は私もHTML 上で JavaSqript の値を使えるということ以外は存じておらず……。JS 、ひいてはデータベースから値を引っ張ってくる必要がありそうな問題なのでしょうか。

[kei344]

変数が使える言語なら数値をカウントアップすることが出来るので、
id="menu-input1"、id="menu-input2"とかが出力されるようにすればよいです。JavaSqript は特に使う必要が無いです。

【ejs forEach 連番 - Google 検索】
https://www.google.co.jp/search?q=ejs+forEach+%E9%80%A3%E7%95%AA
【テンプレートエンジンEJSで使える便利な構文まとめ - Qiita】
https://qiita.com/y_hokkey/items/31f1daa6cecb5f4ea4c9#arrayforeach

[kanon_2155103]

ご返信が送れてしまいすみません。
私の調べ方では出てきてくれなかったので助かります……！

これで出来るかはまだ分からないのですが、input[checkbox] の id を以下のように設定してみました。
<% memo.id %>の部分にはデータベースに格納されているメモの id の値が入っています。

id="menu-input-<% memo.id %>"

また質問を重ねてしまうことになりますが、こういった動的な id を CSS で扱うことはできますか？
勉強不足のせいで望んだ検索結果を出すことができなくて……。

すみませんが、どうかよろしくお願いいたします。

[kei344]

.icon-area > input:checked ~ .menu-content とやればid関係なく処理できますよ。

[kanon_2155103]

確かに……。
考えが及んでおりませんでした。

ありがとうございます。お陰様でできるようになりました！