ドロップダウンメニューを実装したい

前提・実現したいこと

jQueryでドロップダウンメニューを作っています。
メインナビゲーションのMENUをクリックした時に、subnavigationのセクション全体を表示したいのですが
中身が表示されません。
HTMLの記述に問題があるのでしょうか。

発生している問題・エラーメッセージ

メニューをクリックしても表示されません。

該当のソースコード

HTML
1<nav class="navigation pc-block">
2	<ul id="navigation">
3		<li><a href="info.html">INFO</a></li>
4		<li><a href="menu.html">MENU
5			<section class="subnavigation">
6				<div class="subnavigation-inner inner pc-block">
7					<h5>MENU</h5>
8					<nav class="subnavi pc-block">
9						<ul>
10							<li><a href="#lunch">ランチ</a></li>
11							<li><a href="#alacarte">アラカルト</a></li>
12							<li><a href="#dinner">ディナー</a></li>
13							<li><a href="#dessert">デザート</a></li>
14							<li><a href="#drink">ドリンク</a></li>
15						</ul>
16					</nav>
17				</div>
18				<div class="information-inner-sp inner-sp sp-block">
19					<div class="clearfix">
20						<div class="col-left">
21							<h5>INFORMATION</h5>
22							<dl>
23								<dt>2018.6.30</dt>
24								<dd><a href="#calendar">今月の営業カレンダーを公開いたしました。</a></dd>
25							</dl>
26						</div>
27						<div class="col-right">
28							<a href="">
29								<div class="detail detail-sp text-center">
30									<i class="fas fa-chevron-right"></i>
31									<p>詳細はこちら</p>
32								</div>
33							</a>
34						</div>
35					</div>
36				</div>
37			</section>
38		</a></li>
39		<li><a href="takeout">TAKEOUT</a></li>
40		<li><a href="access.html">ACCESS</a></li>
41	</ul>
42</nav>

CSS
1section.subnavigation {
2    display: none;
3}

javascript
1$(function(){
2	$('#navigation li').hover(function(){
3		$("ul:not(:animated)", this).slideDown();
4	}, function(){
5		$("section.subnavigation",this).slideUp();
6	});
7});

退会済みユーザー

2018/11/29 03:36

「・・・作っています。」で終わっていて質問が何か不明ですが？

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

回答2件

セレクタが違います

js
1  $("section.subnavigation:not(:animated)", this).slideDown();

投稿2018/11/29 04:16

akihiro3

総合スコア955

ベストアンサー

CSSをはずして

javascript
1$(function(){
2  $("section.subnavigation").hide();
3  $('#navigation li').hover(
4    function(){
5      $(this).find('.subnavigation:not(:animated)').slideDown();
6    }, function(){
7      $(this).find('.subnavigation').slideUp();
8    });
9});