アコーディオンメニューの制作

Question

###前提・実現したいこと
アコーディオンメニューを作りたい！

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

Priceにマウスを載せるとdisplay:noneで隠されたsub-menuを表示するとメニューの全体の幅が変わってしまいます。
メニュー全体の幅を変えずにsub-menuだけをPriceの下に表示するにはどうすればいいでしょうか？
sub-menuの出し入れはJQueryを使ってやってます。
仕上がりのイメージは一旦こちらです。
https://www.livable.co.jp/baikyaku/sellsoudan/siritai/fudousan-baikyaku-support/

###該当のソースコード

↓↓HTML↓↓

<div id="nav">
  <ul class="outline">
    <li class="menu"><a href="">Home</a></li>
    <li class="menu"><a href="">About</a></li>
    <li id="menu" class="menu"><a>Price</a>
       <ul class="sub-menu">
          <li class=""><a href="">1course</a></li>
          <li class=""><a href="">3course</a></li>
       </ul>
    </li>
    <li class="menu"><a href="">Column</a></li>
    <li class="menu"><a href="">Contact</a></li>
  </ul>  
</div>

↓↓CSS↓↓

#nav {
	min-width: 800px;
	background: #ff8eb9;
}

#nav ul {
	font-size: 0;
	text-align: center;
}

#nav ul li{	
	display: inline-block;
	font-size: 16px;
	color: #fff;
}

#nav ul li a { 	
	display: inline-block;
	padding: 20px 25px;
}

#nav ul li a:hover {	
	background: #ff796e;
}

#nav ul li a:visited {
	color: #fff;
}


.sub-menu {
	display: none;
	width: 200px;
}

↓↓jQuery↓↓


$(function(){


	$('#menu').on('mouseenter', function(){
		$('.sub-menu').toggle();
	});


});

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)

Comments

[退会済みユーザー]

ご自身で書いてみたJavaScript（jQuery）のソースコードも提示してください。

[ringoame49]

ご指示ありがとうございます。jQueryのソースコード追加いたしました。

Answer 1

まずHTML, CSSですが、子メニューである.sub-menuは親メニューである#menuの子要素です。
display: none;されていた子要素が出現すると、その横幅や高さに合わせて親要素のサイズも変わるのは当然です。

これを解決するには、子メニューにposition: absolute;を指定するのが総合的に楽です。

#menu {
  position: relative; /* 追加 */
}

#menu .sub-menu {
  display: none;
  width: 200px; /* ←ここは調整してください */

  /* -- 以下、追加 -- */
  position: absolute;
  top: 100%;
  left: 0;
  background: #ff8eb9;
}

JavaScript側はmouseenter（マウスオーバー時）にしかイベントが発生していないので、マウスアウト時にもイベントをつけてあげましょう。

$(function(){
	$('#menu').on('mouseenter mouseleave', function(){
  	$(this).children('.sub-menu').toggle();
  });
});

ご提示の完成イメージに合わせるなら.toggle()ではなく.fadeToggle()の方が良いかもしれません

Comments

[ringoame49]

aozuki様

ありがとうございます！！
無事に解決できました！！
またjQueryの足りない部分までお教えいただきありがとうございます！
大変助かりました！

また機会がありましたらよろしくお願いいたしますm(__)m