解決したいこと
お世話になります。
メニューアイコンの位置が :hover 時に上にずれてしまう問題を解決したいです。
１枚目の画像が通常の状態、２枚目が :hover が適応された状態です。
ご助力のほど、なにとぞよろしくお願いいたします。
該当のソースコード
ejs(html)
1<div class="icon-area">2 <div class="menu-icon">3 <div></div>4 <div></div>5 <div></div>6 </div>7 <ul class="menu-content">8 <li><a href="/edit/<%= memo.id %>">Edit</a></li>9 <li><form action="/remove/<%= memo.id %>" method="post">10 <input type="submit" value="Remove">11 </form></li>12 </ul>13</div>
css
1.icon-area {2 position: relative;3 width: 20%;4 padding: 12px 10px;5 margin: auto;6}7 8.menu-icon div {9 width: 3px;10 height: 3px;11 background-color: #D4BAC0;12 margin: 3px auto;13 border-radius: 100px;14}15 16.icon-area:hover .menu-icon div {17 background-color: #A6858E;18 transition: all 0.3s ease;19}20 21.menu-content {22 z-index: 9;23 display: none;24 margin: 0;25 padding: 0;26 position: sticky;27}28 29.icon-area:hover .menu-content {30 display: block;31 width: 120px;32 transform: translateX(calc(-50% + 6px));33 margin-top: 12px;34 overflow: hidden;35 background-color: #fff;36 border: 1px solid #f9dee0;37}38 39.memu-content li {40 display: flex;41 flex-direction: column;42 border-top: 1px solid #f9dee0;43}44 45.menu-content li:first-child {46 border: none;47}48 49.menu-content form, .menu-content a {50 text-align: center;51 margin: auto;52 width: 100%;53}54 55.menu-content input {56 margin: 0 auto;57 border: none;58 outline: none;59 cursor: pointer;60 -webkit-appearance: none;61 -moz-appearance: none;62 appearance: none;63 padding: 0;64 font-size: 0.75em;65 letter-spacing: 0;66 color: #D4BAC0;67 background-color: transparent;68}69 70.menu-content a {71 font-size: 0.75em;72 letter-spacing: 0;73 color: #D4BAC0;74}75 76.menu-content input:hover, .menu-content a:hover {77 color: #FF8080;78}
試したこと
.menu-content に position: sticky; を指定しているのが原因かと思い、 .icon-area にも position プロパティをいくつか試してみたのですが（relative, absolte, fixed, sticky）、どうやら関係なかったようです。
補足情報（FW/ツールのバージョンなど）
作業環境は Windows11 、使用ブラウザは Chrome です。
その他、もしご入用の情報があれば仰ってくださいませ。
0 コメント