ドロップダウンメニューを作成したが、出てきたメニューをクリックしようとするとすぐメニューが閉じてしまう。

ドロップダウンメニューをjqueryで作成したのですが、いざ開いたメニューをクリックしようとすると、
ホバー判定が外れて閉じてしまいます。
問題なくメニューをクリックできるようにしたいです。
何日も詰まっており、ご教授お願いできませんでしょうか。

jquery
1$('.p-nav__sub').hide();
2
3$('.p-nav__list').hover(function() {
4
5$(".p-nav__sub:not(:animated)", this).slideDown();
6
7}, function() {
8
9$(".p-nav__sub",this).slideUp();
10});

html
1        <header class="l-header">
2          <div class="l-header__container">
3            <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a>
4            <nav class="p-nav">
5              <ul class="p-nav__menu">
6                <li class="p-nav__list">
7                  <a href="" class="p-nav__button">MENS</a>
8                  <ul class="p-nav__sub">
9                    <div class="p-nav__container">
10                      <li><a href="">MENSTOP</a></li>
11                      <li>BRAND</li>
12                      <li><a href="">ブランドを選択する</a></li>
13                      <li>CATEGORY</li>
14                    </div>
15                    <div class="p-nav__container">
16                      <li><a href="">トップス</a></li>
17                      <li><a href="">アウター</a></li>
18                      <li><a href="">パンツ</a></li>
19                    </div>
20                    <div class="p-nav__container">
21                      <li><a href="">オールインワン</a></li>
22                      <li><a href="">スーツ</a></li>
23                      <li><a href="">バッグ</a></li>
24                    </div>
25                    <div class="p-nav__container">
26                      <li><a href="">シューズ</a></li>
27                      <li><a href="">小物</a></li>
28                      <li><a href="">アクセサリー</a></li>
29                    </div>
30                    <div class="p-nav__container">
31                      <li><a href="">アンダーウェア</a></li>
32                      <li><a href="">レッグウェア</a></li>
33                      <li><a href="">帽子</a></li>
34                    </div>
35                  </ul>
36                </li>
37                <li class="p-nav__list">
38                  <a href="" class="p-nav__button" id="p-nav__botton2">WOMENS</a>
39                  <ul class="p-nav__sub">
40                    <div class="p-nav__container">
41                      <li><a href="">WOMENSTOP</a></li>
42                      <li>BRAND</li>
43                      <li><a href="">ブランドを選択する</a></li>
44                      <li>CATEGORY</li>
45                    </div>
46                    <div class="p-nav__container">
47                      <li><a href="">トップス</a></li>
48                      <li><a href="">アウター</a></li>
49                      <li><a href="">パンツ</a></li>
50                    </div>
51                    <div class="p-nav__container">
52                      <li><a href="">オールインワン</a></li>
53                      <li><a href="">スーツ</a></li>
54                      <li><a href="">バッグ</a></li>
55                    </div>
56                    <div class="p-nav__container">
57                      <li><a href="">シューズ</a></li>
58                      <li><a href="">小物</a></li>
59                      <li><a href="">アクセサリー</a></li>
60                    </div>
61                    <div class="p-nav__container">
62                      <li><a href="">アンダーウェア</a></li>
63                      <li><a href="">レッグウェア</a></li>
64                      <li><a href="">帽子</a></li>
65                    </div>
66                  </ul>
67                </li>
68                <li class="p-nav__list">
69                  <a href="" class="p-nav__button" id="p-nav__botton3">SHOP LIST</a>
70                </li>
71              </ul>
72            </nav>
73            <div class="p-keyword">
74              <input class="p-keyword__search" type="search"  placeholder="何かお探しですか">
75              <ul class="p-keyword__container">
76                <li class="p-keyword__list">
77                  <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a>
78                </li>
79                <li class="p-keyword__list">
80                  <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a>
81                </li>
82              </ul>
83              <a href="" class="p-keyword__count">0</a>
84            </div>
85            <div class="p-hamburger">
86              <span class="p-hamburger__bar"></span>
87              <span class="p-hamburger__bar"></span>
88              <span class="p-hamburger__bar"></span>
89            </div>
90          </div>
91        </header>

css
1.l-header__container {
2  display: flex;
3  align-items: center;
4}
5
6.p-section:last-child {
7  margin-top: 24px;
8}
9
10   .white-space: nowrap;
11  }
12
13  .l-header__container {
14    justify-content: space-between;
15  }
16
17  .p-menu {
18    display: none;
19  }
20
21  .p-hamburger__fade {
22    display: none;
23  }
24
25  .p-login {
26    width: 900px;
27    margin: 0 auto;
28  }
29
30  .p-login__menu {
31    display: flex;
32    justify-content: flex-end;
33  }
34
35  .p-login__list:not(:last-child) {
36    margin-right: 20px;
37  }
38
39  .p-login__button {
40    color: #000;
41    text-decoration: none;
42    font-size: 12px;
43  }
44
45  .p-login__button:hover {
46    text-decoration: underline;
47  }
48
49  .l-header {
50    width: 900px;
51    margin: 0 auto;
52  }
53
54  .l-header__logo {
55    width: 200px;
56    margin-right: 120px;
57  }
58
59  .p-nav__button {
60    color: #000;
61    text-decoration: none;
62    font-weight: bold;
63  }
64
65  .p-nav__button:hover {
66  color: #BBBBBB;
67  }
68
69  .p-nav__menu {
70    display: flex;
71  }
72
73  .p-nav__list {
74    margin-right: 60px;
75  }
76
77  .p-keyword__search {
78    width: 150px;
79    margin-right: 5px;
80    border-right:none;
81    border-left:none;
82    border-top:none;
83    border-width:1px;
84  }
85
86  .p-keyword__glasses {
87    width: 20px;
88  }
89
90  .p-keyword__cart {
91    width: 20px;
92  }
93
94  .p-keyword__count {
95    color: #000;
96    padding-top: 5px;
97    text-decoration: none;
98  }
99
100  .p-keyword__count:hover {
101    text-decoration: underline;
102  }
103
104  .p-keyword {
105    display: flex;
106  }
107
108  .p-keyword__list:first-child:after {
109    content: "";
110    border-right:1px solid #000;
111    padding-right: 16px;
112  }
113
114  .p-keyword__list:last-child {
115    margin-left: 16px;
116  }
117
118  .p-keyword__container {
119    display: flex;
120    margin-right: 5px;
121  }
122
123  .p-section:first-child {
124    padding-top: 24px;
125    margin-bottom: 24px;
126  }
127
128  .p-nav__sub {
129    background-color: #000;
130    position: absolute;
131    left:  0px;
132    top: 135px;
133    width: 100%;
134  }
135
136  .p-nav__sub > li > a:hover {
137    text-decoration: underline;
138  }
139
140  .p-nav__container {
141    padding-left: 520px;
142  }
143
144  .p-nav__container:not(:nth-child(1)) {
145    display: flex;
146  }
147
148  .p-nav__container > li {
149    width: 33%;
150    margin-top: 16px;
151    color: #fff;
152  }
153
154  .p-nav__container > li > a {
155    color: #fff;
156    text-decoration: none;
157  }
158
159  .p-nav__container > li > a:hover {
160    text-decoration: underline;
161  }
162
163/* ナビゲーションをホバーしたとき下線 */
164  .p-nav__list > a::after {
165    border-bottom: solid 4px #000;
166    content: "";
167    display: block;
168    width: 0;
169    position: absolute;
170    top: 85px;
171  }
172
173  .p-nav__list > a:hover::after {
174    width: 50px;
175  }
176
177  #p-nav__botton2:hover::after {
178    width: 80px;
179  }
180
181  #p-nav__botton3:hover::after {
182    width: 100px;
183  }
184/*  */
185}

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

回答1件

ベストアンサー

実現されたい動きになっているか分かりませんが、テストしてみました。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <style>
9    .l-header__container {
10  display: flex;
11  align-items: center;
12}
13
14.p-section:last-child {
15  margin-top: 24px;
16}
17
18   /* .white-space: nowrap;
19  } */
20
21  .l-header__container {
22    justify-content: space-between;
23  }
24
25  .p-menu {
26    display: none;
27  }
28
29  .p-hamburger__fade {
30    display: none;
31  }
32
33  .p-login {
34    width: 900px;
35    margin: 0 auto;
36  }
37
38  .p-login__menu {
39    display: flex;
40    justify-content: flex-end;
41  }
42
43  .p-login__list:not(:last-child) {
44    margin-right: 20px;
45  }
46
47  .p-login__button {
48    color: #000;
49    text-decoration: none;
50    font-size: 12px;
51  }
52
53  .p-login__button:hover {
54    text-decoration: underline;
55  }
56
57  .l-header {
58    width: 900px;
59    margin: 0 auto;
60  }
61
62  .l-header__logo {
63    width: 200px;
64    margin-right: 120px;
65  }
66
67  .p-nav__button {
68    color: #000;
69    text-decoration: none;
70    font-weight: bold;
71  }
72
73  .p-nav__button:hover {
74  color: #BBBBBB;
75  }
76
77  .p-nav__menu {
78    display: flex;
79  }
80
81  .p-nav__list {
82    margin-right: 60px;
83  }
84
85  .p-keyword__search {
86    width: 150px;
87    margin-right: 5px;
88    border-right:none;
89    border-left:none;
90    border-top:none;
91    border-width:1px;
92  }
93
94  .p-keyword__glasses {
95    width: 20px;
96  }
97
98  .p-keyword__cart {
99    width: 20px;
100  }
101
102  .p-keyword__count {
103    color: #000;
104    padding-top: 5px;
105    text-decoration: none;
106  }
107
108  .p-keyword__count:hover {
109    text-decoration: underline;
110  }
111
112  .p-keyword {
113    display: flex;
114  }
115
116  .p-keyword__list:first-child:after {
117    content: "";
118    border-right:1px solid #000;
119    padding-right: 16px;
120  }
121
122  .p-keyword__list:last-child {
123    margin-left: 16px;
124  }
125
126  .p-keyword__container {
127    display: flex;
128    margin-right: 5px;
129  }
130
131  .p-section:first-child {
132    padding-top: 24px;
133    margin-bottom: 24px;
134  }
135
136  .p-nav__sub {
137    background-color: #000;
138    position: absolute;
139    left:  0px;
140    top: 135px;
141    width: 100%;
142  }
143
144  .p-nav__sub > li > a:hover {
145    text-decoration: underline;
146  }
147
148  .p-nav__container {
149    padding-left: 520px;
150  }
151
152  .p-nav__container:not(:nth-child(1)) {
153    display: flex;
154  }
155
156  .p-nav__container > li {
157    width: 33%;
158    margin-top: 16px;
159    color: #fff;
160  }
161
162  .p-nav__container > li > a {
163    color: #fff;
164    text-decoration: none;
165  }
166
167  .p-nav__container > li > a:hover {
168    text-decoration: underline;
169  }
170
171/* ナビゲーションをホバーしたとき下線 */
172  .p-nav__list > a::after {
173    border-bottom: solid 4px #000;
174    content: "";
175    display: block;
176    width: 0;
177    position: absolute;
178    top: 85px;
179  }
180
181  .p-nav__list > a:hover::after {
182    width: 50px;
183  }
184
185  #p-nav__botton2:hover::after {
186    width: 80px;
187  }
188
189  #p-nav__botton3:hover::after {
190    width: 100px;
191  }
192  </style>
193</head>
194<body>
195
196  <header class="l-header">
197    <div class="l-header__container">
198      <a href=""><img class="l-header__logo" src="./assets/images/icon1.png" alt="会社ロゴ" ></a>
199      <nav class="p-nav">
200        <ul class="p-nav__menu">
201          <li class="p-nav__list">
202            <a href="" class="p-nav__button">MENS</a>
203            <ul class="p-nav__sub">
204              <div class="p-nav__container">
205                <li><a href="">MENSTOP</a></li>
206                <li>BRAND</li>
207                <li><a href="">ブランドを選択する</a></li>
208                <li>CATEGORY</li>
209              </div>
210              <div class="p-nav__container">
211                <li><a href="">トップス</a></li>
212                <li><a href="">アウター</a></li>
213                <li><a href="">パンツ</a></li>
214              </div>
215              <div class="p-nav__container">
216                <li><a href="">オールインワン</a></li>
217                <li><a href="">スーツ</a></li>
218                <li><a href="">バッグ</a></li>
219              </div>
220              <div class="p-nav__container">
221                <li><a href="">シューズ</a></li>
222                <li><a href="">小物</a></li>
223                <li><a href="">アクセサリー</a></li>
224              </div>
225              <div class="p-nav__container">
226                <li><a href="">アンダーウェア</a></li>
227                <li><a href="">レッグウェア</a></li>
228                <li><a href="">帽子</a></li>
229              </div>
230            </ul>
231          </li>
232          <li class="p-nav__list">
233            <a href="" class="p-nav__button" id="p-nav__botton2">WOMENS</a>
234            <ul class="p-nav__sub">
235              <div class="p-nav__container">
236                <li><a href="">WOMENSTOP</a></li>
237                <li>BRAND</li>
238                <li><a href="">ブランドを選択する</a></li>
239                <li>CATEGORY</li>
240              </div>
241              <div class="p-nav__container">
242                <li><a href="">トップス</a></li>
243                <li><a href="">アウター</a></li>
244                <li><a href="">パンツ</a></li>
245              </div>
246              <div class="p-nav__container">
247                <li><a href="">オールインワン</a></li>
248                <li><a href="">スーツ</a></li>
249                <li><a href="">バッグ</a></li>
250              </div>
251              <div class="p-nav__container">
252                <li><a href="">シューズ</a></li>
253                <li><a href="">小物</a></li>
254                <li><a href="">アクセサリー</a></li>
255              </div>
256              <div class="p-nav__container">
257                <li><a href="">アンダーウェア</a></li>
258                <li><a href="">レッグウェア</a></li>
259                <li><a href="">帽子</a></li>
260              </div>
261            </ul>
262          </li>
263          <li class="p-nav__list">
264            <a href="" class="p-nav__button" id="p-nav__botton3">SHOP LIST</a>
265          </li>
266        </ul>
267      </nav>
268      <div class="p-keyword">
269        <input class="p-keyword__search" type="search"  placeholder="何かお探しですか">
270        <ul class="p-keyword__container">
271          <li class="p-keyword__list">
272            <a href=""><img class="p-keyword__glasses" src="./assets/images/icon2.png" alt="虫眼鏡"></a>
273          </li>
274          <li class="p-keyword__list">
275            <a href=""><img class="p-keyword__cart" src="./assets/images/icon3.png" alt="虫眼鏡"></a>
276          </li>
277        </ul>
278        <a href="" class="p-keyword__count">0</a>
279      </div>
280      <div class="p-hamburger">
281        <span class="p-hamburger__bar"></span>
282        <span class="p-hamburger__bar"></span>
283        <span class="p-hamburger__bar"></span>
284      </div>
285    </div>
286  </header>
287  
288  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
289  <script>
290    $(function() {
291      $('.p-nav__sub').hide();
292      $('.p-nav__list').hover(
293        function(){$(this).find('.p-nav__sub').slideDown();},
294        function(){$(this).find('.p-nav__sub').slideUp();},
295      );
296    });
297  </script>
298</body>
299</html>