Result
jQuery
$(function() { //li要素にマウスホバーでスライドダウン/アップのイベント発火 $("ul.main-menu li").hover(function() { $(">ul:not(:animated)", this).slideDown(500); }, function() { $(">ul", this).slideUp(300); });}); |
css
ul.main-menu li{ float: left; width: 120px; height: 38px; background: #ccc; position: relative;}ul.main-menu li a:hover{ background: #f0f0f0;}ul.main-menu li a{ display: block; width: 100%; height: 100%; line-height: 38px; text-indent: 10px; text-decoration: none; position:relative;}ul.main-menu li ul.sub-menu{ position: absolute; display: none;}ul.sub-menu li{ float:none; }ul.sub-menu li ul.sub-menu{ top:0; left:120px;}ul.main-menu:after{ content:"."; display: block; clear: both; height: 0; visibility: hidden;} |
html
<ul class="main-menu"> <li> <a href="#">メニュー1</a> <ul class="sub-menu"> <li><a href="#">メニュー1-1</a></li> <li><a href="#">メニュー1-2</a> <ul class="sub-menu"> <li><a href="#">メニュー1-2-1</a></li> <li><a href="#">メニュー1-2-2</a></li> <li><a href="#">メニュー1-2-3</a></li> </ul> </li> <li><a href="#">メニュー1-3</a></li> </ul> </li> <li> <a href="#">メニュー2</a> <ul class="sub-menu"> <li><a href="#">メニュー2-1</a></li> <li><a href="#">メニュー2-2</a></li> <li><a href="#">メニュー2-3</a> <ul class="sub-menu"> <li><a href="#">メニュー2-3-1</a></li> <li><a href="#">メニュー2-3-2</a> <ul class="sub-menu"> <li><a href="#">メニュー2-3-2-1</a></li> <li><a href="#">メニュー2-3-2-2</a></li> <li><a href="#">メニュー2-3-2-3</a></li> </ul> </li> <li><a href="#">メニュー2-3-3</a></li> </ul> </li> </ul> </li> <li> <a href="#">メニュー3</a> <ul class="sub-menu"> <li><a href="#">メニュー3-1</a></li> <li><a href="#">メニュー3-2</a></li> <li><a href="#">メニュー3-3</a></li> </ul> </li> <li> <a href="#">メニュー4</a> <ul class="sub-menu"> <li><a href="#">メニュー4-1</a></li> <li><a href="#">メニュー4-2</a></li> <li><a href="#">メニュー4-3</a></li> </ul> </li> </ul> |
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
