マウスオーバーすると補足メニューを表示します。

マウスオーバーすると更にメニューを表示します。

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;
}