アコーディオンメニューにおけるhover動作が不安定

マウスオーバーした際にアコーディオンメニューが表示されるようなページを作成したいのですが、hoverでの動作が不安定です。
要素間にhoverの効いていない隙間が微妙に存在していることが原因なのでは？と思いますが、該当箇所がどこなのかわかりません。
また、以下の問題もおそらく同じ原因で付随して起こっている為、解決したいです。

マウスオーバーした際にaタグが数pxほど下に下がる
下に下がったことで別要素とのhover同士が重なる為か、親メニューの境界部にマウスオーバーした際にhoverがON<->OFFのような状態になり色の点滅がチカチカしてしまう

初学者の為、どなたか解決法をご教示いただけると幸いです。
よろしくお願い致します。

HTML
1  <navi class="submenu-container">
2    <ul class="f-submenu">
3        <li class="f-submenuitem"><a href="#">main1  <span>▾</span></a>
4          <ul class="second-menuitem">
5            <li><a href="#c1">1</a></li>
6            <li><a href="#c2">2</a></li>
7            <li><a href="#c3">3</a></li>
8            <li><a href="#c4">4</a></li>  
9          </ul> 
10        </li>
11        <li class="f-submenuitem"><a href="#">main2  <span>▾</span></a>
12        </li>
13        <li class="f-submenuitem"><a href="#">main3  <span>▾</span></a></li>
14        <li class="f-submenuitem"><a href="#">main4  <span>▾</span></a></li>
15        <li class="f-submenuitem"><a href="#">main5  <span>▾</span></a></li>
16        <li class="f-submenuitem"><a href="#">main6  <span>▾</span></a></li>
17        <li class="f-submenuitem"><a href="#">main7  <span>▾</span></a></li>
18        <li class="f-submenuitem"><a href="#">main8  <span>▾</span></a>
19          <ul class="second-menuitem">
20              <li><a href="#c5">5</a></li>
21              <li><a href="#c6">6</a></li>
22              <li><a href="#c7">7</a></li>
23              </ul> 
24        </li> 
25    </ul>
26  </navi>
27

css
1  .submenu-container {
2    margin: 0;
3  }
4  .submenu-container .f-submenu {
5    display: flex;
6    flex-wrap: wrap;
7    flex: 0 0 auto; 
8    width: 100%;
9    padding: 0px;
10    list-style-type: none;
11    justify-content: space-between;
12    
13  }
14  .f-submenuitem{
15    width: 24.8%;
16    height: 40px;
17    background-color: #E04539;
18    box-shadow: 0px 0px 0.5px #de5c52;
19    border-radius: 1px;
20    color: white;
21    font-size: 0.9rem;
22    margin-top: 2px;
23    text-align: center;
24    line-height: 40px; 
25  }
26  .f-submenuitem>a{
27    background-color: #E04539;
28    color: white;
29  }
30
31  .f-submenuitem:hover{
32    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
33    background-color: white; 
34    color: #E04539;
35    border: solid #E04539;
36    box-sizing: border-box; 
37  }
38

Lhankor_Mhy

2019/09/25 03:57

『動作が不安定』とは具体的にはどういった現象ですか？

行動規範の内容に同意します

回答2件

ぱっと見ですが、.f-submenuitem:hover{}にborder: solid #E04539;を指定しているため、動作が不安定に見えるのかなと思いました。
項目毎に外枠を指定されたいのであれば.f-submenuitem{}にborder: solid #E04539;を指定された方が良いかと思います。

投稿2019/09/25 04:07

編集2019/09/25 04:11

kamakura

総合スコア39

ベストアンサー

上ボーダーのmedium（border-widthの既定値）分、位置が変化するからでしょう。hover時にボーダーを使うのであれば最初からボーダーを透明で用意しておきましょう。

CSS
1  .f-submenuitem{
2    width: 24.8%;
3    height: 40px;
4    background-color: #E04539;
5    box-shadow: 0px 0px 0.5px #de5c52;
6    border-radius: 1px;
7    color: white;
8    font-size: 0.9rem;
9    margin-top: 2px;
10    text-align: center;
11    line-height: 40px;
12    border: medium solid transparent; /* ADD */
13    box-sizing: border-box; /* ADD */
14  }
15```**動くサンプル：**[https://jsfiddle.net/bp3co58q/](https://jsfiddle.net/bp3co58q/)
16
17---
18
19点滅は再現しなかったので対処していませんが、`transition` を使うことで見た目上緩和する可能性があります。
20
21【transition - CSS: カスケーディングスタイルシート | MDN】
22[https://developer.mozilla.org/ja/docs/Web/CSS/transition](https://developer.mozilla.org/ja/docs/Web/CSS/transition)