ドロップダウンメニュー2

	$(function(){
		//$(".sub-menu").hide();
		$(".main-menu li").hover(function(){
			//console.log("hover", this);
			$(this).children("ul.sub-menu:not(:animated)").slideDown(300); // hoverの方だけ
		}, function(){
			//console.log("out", this);
			$(this).children("ul.sub-menu").slideUp(300);
		});

		}); // end function jQuery

<div id="navi">
	<ul class="main-menu">
		<li><a href="#">メインメニュー1</a>
			<ul class="sub-menu">
				<li><a href="#">サブメニュー1</a></li>
				<li><a href="#">サブメニュー1</a></li>
				<li><a href="#">サブメニュー1</a>
					<ul class="sub-menu">
						<li><a href="#">サブ×2メニュー1</a></li>
						<li><a href="#">サブ×2メニュー1</a></li>
						<li><a href="#">サブ×2メニュー1</a>
							<ul class="sub-menu">
								<li><a href="#">サブ×3メニュー1</a></li>
								<li><a href="#">サブ×3メニュー1</a></li>
								<li><a href="#">サブ×3メニュー1</a>
									<ul class="sub-menu">
										<li><a href="#">サブ×4メニュー1</a></li>
										<li><a href="#">サブ×4メニュー1</a></li>
										<li><a href="#">サブ×4メニュー1</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>

	</ul>
</div>

ulにclassを付けていることに注意！

スマホ対策としては、最初のli（=メインメニュー）のaは#にする。

インデックスに戻る

ドロップダウンメニュー2（hover）