### 実現したいことお世話になります。ただいま制作中メモのWEBアプリの中でドロップダウンメニューを実装してみたのですが、そのレイアウトについていくつか行き詰まってしまいました。どうか、皆様のお知恵をお貸しいただけたらと思います。 1. メモ一覧のページにて、メニューアイコンをクリックしたらその子要素であるドロップダウンが表示される仕組みなのですが、どこのメニューアイコンをクリックしても一番上のメニューアイコンの下に表示されてしまいます。クリックしたメニューアイコンの下に表示するにはどうすればよいですか？ 2. ドロップダウンの位置をメニューアイコンの真下に表示したいです。今の状態ではかなり右に寄ってしまっているので……。 3. ドロップダウンのレイアウトを、親要素である .table-body から独立させたいです。例えば .table-body 内の li 要素に height: 72px; を指定しているのですが、それがドロップダウンにも反映されており、.menu-content 内の li 要素に新しく height を指定しても反映されませんでした。うまく説明できず恐縮ですが、以下の画像をご参照くださいませ。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-26/23fbb89e-ac9a-4660-aa70-a472b9f2d844.png) また、HTML(EJS) における該当のテーブル部分は以下の通りです。 ```HTML(EJS)

Name Last Modified

<%= memo.title %>
<%= memo.modified %>
- Edit

``` CSSに関してはかなり長くなってしまうため、メニューアイコンとドロップアウトの周辺のみ記載します。もし他の部分が必要でしたら、お手数ですがコメントを頂けますと幸いです。 ```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%); を追加してみましたが、以下の画像のようになってしまいました。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-26/681bbbcc-9be4-46e6-a027-69d8714b306a.png) また、1つめと3つめについてもそれぞれ "ドロップダウン位置可変" や "子要素 height 効かない" などいくつかの言葉で調べてみたのですが、それらしい対処法が書かれたサイトを見つけることが出来ませんでした。 ### 補足情報（FW/ツールのバージョンなど） HTML のコードは EJS ファイルで書いているため EJS タグを使用しましたが、今回の質問とは特に関係がないかと思われます。以上、ご教示のほど何卒よろしくお願いいたします。

	@@ -1 +1 @@
1	- ドロップダウンメニューの位置を~~思い通りに~~する方法、他
1	+ ドロップダウンメニューの位置とレイアウトを変更する方法

質問編集履歴