マウスオーバーすると更にメニューを表示します。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tool.js"></script>
[tool.js]JavaScript
// summenu 表示 $(function(){ var li = $('.mod_categorynav > ul > li'); $(li).each(function() { var target = $(this); target.hover(function(){ //マウスが乗ったら $(target).find('.mod_submenu').slideDown(200); },function(){ //マウスが外れたら $('.mod_submenu').hide(); }); }); });
HTMl
<div class="mod_categorynav ex_opaity"> <ul class="ex_clearfix"> <li><a href="https://codingmania.net/"><img src="img/menu_01.jpg" width="152" height="100" alt="カテゴリ01"></a> <div class="mod_submenu"> <ul> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> </ul> <!--mod_submenu_end--></div> </li> <li><a href="https://codingmania.net/"><img src="img/menu_02.jpg" width="152" height="100" alt="カテゴリ02"></a> <div class="mod_submenu"> <ul> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> </ul> <!--mod_submenu_end--></div> </li> <li><a href="https://codingmania.net/"><img src="img/menu_03.jpg" width="152" height="100" alt="カテゴリ03"></a> <div class="mod_submenu"> <ul> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> </ul> <!--mod_submenu_end--></div> </li> <li><a href="https://codingmania.net/"><img src="img/menu_04.jpg" width="152" height="100" alt="カテゴリ04"></a> <div class="mod_submenu"> <ul> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> </ul> <!--mod_submenu_end--></div> </li> <li class="last"><a href="https://codingmania.net/"><img src="img/menu_05.jpg" width="152" height="100" alt="カテゴリ05"></a> <div class="mod_submenu sublast"> <ul> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> <li><a href="https://codingmania.net/">カテゴリサブメニュー</a></li> </ul> <!--mod_submenu_end--></div> </li> </ul> <!-- mod_categorynav_end --></div>
CSS
@charset "UTF-8"; /* mod_categorynav -----------------------------------------*/ .mod_categorynav{ width:960px; } .mod_categorynav ul{ } .mod_categorynav ul li{ position:relative; float:left; padding:0 10px 0 0; } .mod_categorynav ul li.last{ padding-right:0; } /* mod_submenu */ .mod_submenu{ position:absolute; top:90px; left:0px; z-index:9999; padding:20px 0 0 0; background:transparent url('img/bg_submenu-top.png') no-repeat left top; } .mod_submenu.sublast{ left:-98px; background:transparent url('img/bg_submenu-top02.png') no-repeat left top; } .mod_submenu{ display:none; } .mod_submenu ul{ background:transparent url('img/bk_submenu.jpg') no-repeat left bottom; width:240px; padding:0 5px 5px 5px; zoom: 1; } .mod_submenu ul li{ float:none; font-weight:bold; border-bottom:solid 1px #CCCCCC; padding:5px 0 0 0; margin:0 0 3px 0; } .mod_submenu ul li:last-child{ border-bottom:none; } .mod_submenu ul li a{ display:block; float:none; font-weight:bold; }