リンクを枠全体に設定するために擬似要素を設定したらhoverが変なことになる

で質問してそれは解決したのですが、別件で問題が生じ、改めて詳しく教えてください。

CSSにbeforeを設定して、この上記の問題はうまくいったのですが、また新たな問題が出てきてしまいました。

それは、ドロップダウンメニューの最後だけにしか、hoverが効かない

ということです。ドロップダウンメニューはliの子要素というか、そこに設定しています。
hoverしたときに、色を変えたりしたいのですが、なぜか、複数あるドロップダウンメニューの中の最後のメニューにしかホバーが効きません。そして、デベロッパーツールで確認したら、やはりこの部分が影響していることが判明しました。ここを無効にすると、すべてのドロップダウンメニューにhoverが効くようになりました。

css
1
2.h-menu{
3    display: flex;
4    align-items: center;
5}
6
7
8.h-list{
9    display: inline-block;
10    font-weight: bold;
11    text-decoration: none;
12    //text-align: center;
13    position: relative;
14    //padding: 0px 6px;
15   //margin: 23px 16px;
16   //margin: 0px 16px;
17   padding: 23px 12.5px 24px 18px;
18}
19
20
21.h-list a{
22    color: #333;
23    text-decoration: none;
24    //padding: 23px 18px 23px 23px; 
25    display: block;   
26    //padding: 23px 12.5px 24px 18px;
27}
28
29.h-list a::before {
30  content: "";
31  position: absolute;
32  display: block;
33  top:0;
34  bottom: 0;
35  left: 0;
36  right: 0;
37}
38
39
40.h-list:last-child {
41  background: #2498b3;
42  list-style: none;
43  font-weight: bold;
44  //margin-left: 1.5px;
45  //padding: 0px 6px 0;
46  text-decoration: none;
47  //color: #fff;
48}
49
50.h-list:last-child a {
51  color:#fff;
52  }
53
54
55  ul {
56    list-style: none;
57  }
58
59
60.sub-menu-item a{
61  background:#E9F8FB;
62  padding: 0px 20px 0px 15px;
63 // padding: 10px 20px 10px 15px;
64}
65
66.sub-menu-item a:hover{
67  background: #fff;
68}
69
70
71.sub-menu {
72  position: absolute;
73  top: 74px;
74  width: auto;
75  font-weight: normal;
76  line-height: 3.5;
77  
78}
79
80.h-list:hover > .sub-menu > .sub-menu-item {
81  overflow: visible;
82  opacity: 1;
83  height: 55px;
84}
85.sub-menu-item {
86  overflow: hidden;
87  opacity: 0;
88  height: 0;
89  white-space: nowrap;
90  //padding: 10%;
91  transition: 0.2s;
92}
93
94
95.sub-text {
96	display: inline-block;
97	transition: all .3s ease 0s;
98	text-decoration: none;
99}
100
101.sub-text:hover { 
102	cursor: pointer;
103	color: #2498b3;
104}

html
1
2<li class="h-list">
3            <a href="#">あああああ</a>
4                <ul class="sub-menu">
5                    <li class="sub-menu-item"><a class="sub-text" href="#">いいい</a></li>
6                    <li class="sub-menu-item"><a class="sub-text" href="#">ううう</a></li>
7                    <li class="sub-menu-item"><a class="sub-text" href="#">えええ</a></li>
8                    <li class="sub-menu-item"><a class="sub-text" href="#">おおお</a></li>
9                    <li class="sub-menu-item"><a class="sub-text" href="#">かかか</a></li>
10                </ul>
11            </li>

上記の「かかか」だけにhoverが適用される状態なのです。

これは一体全体どういうことなのでしょうか？

またその場合、どのようにすればすべてに設定されるようになりますか？

出来れば急ぎで教えて頂きたいです。。。

おそらく、
.h-list:last-child a {
color:#fff;
}

が影響していると思うのですが、親要素？のliの最後だけに設定したのに、
子要素のsub-menu-itemにも影響してしまいます。
sub-menu-itemには影響しないようにする方法を教えて頂ければ解決するかもです。

Jon_do

2021/06/29 21:42

状況が再現できるコードを貼り付けてください。過去の質問も見てみましたが、現状ただのメニューで情報が足りません。

B_J

2021/06/29 22:03

すみません、html,css追記しました。

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

回答1件

html
1<a class="hoge" href="#">あああああ</a>

css
1.h-list .hoge::before {
2  content: "";
3  position: absolute;
4  display: block;
5  top:0;
6  bottom: 0;
7  left: 0;
8  right: 0;
9}

投稿2021/06/29 23:04

Jon_do

総合スコア1373

B_J

2021/06/30 02:10 編集

ありがとうございます。できました。本当にありがとうございます！ただ、分からないのは、まえのままだと、listに設定した、 .h-list a{ color: #333; text-decoration: none; display: block; } .h-list:last-child { background: #2498b3; list-style: none; font-weight: bold; //margin-left: 1.5px; //padding: 0px 6px 0; text-decoration: none; //color: #fff; } .h-list:last-child a { color:#fff; } がなぜ、listの子要素？の、sub-menuのlast-childにまで影響を及ぼしてしまうのでしょうか？？？