WPならプラグインで簡単に実装できるけど、細かいカスタマイズを考えると自分で作るのが一番。それほど難しくないし。
html
<div id="amenu-list">
<ul>
<li>
<a href="#">メニュー１</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li>
<a href="#">メニュー２</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li>
<a href="#">メニュー３</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
</ul>
</div> |
<div id="amenu-list">
<ul>
<li>
<a href="#">メニュー１</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li>
<a href="#">メニュー２</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
<li>
<a href="#">メニュー３</a>
<ul>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
<li><a href="">サブメニュー</a></li>
</ul>
</li>
</ul>
</div>
css
<style type="text/css">
#amenu-list ul, amenu-list li {margin:0; padding:0; list-style-type:none}
#amenu-list li {border:1px solid #CCC}
#amenu-list li a {display:block;background:#00E;color:#FFF}
#amenu-list li a:hover {background:#CCF;color:#00E}
</style> |
<style type="text/css">
#amenu-list ul, amenu-list li {margin:0; padding:0; list-style-type:none}
#amenu-list li {border:1px solid #CCC}
#amenu-list li a {display:block;background:#00E;color:#FFF}
#amenu-list li a:hover {background:#CCF;color:#00E}
</style>
jQuery
<script type="text/javascript">
$(function(){
$('#amenu-list li').hover(
function(){$('>ul',this).slideDown('fast');},
function(){$('>ul',this).slideUp('fast');}
);
});
</script> |
<script type="text/javascript">
$(function(){
$('#amenu-list li').hover(
function(){$('>ul',this).slideDown('fast');},
function(){$('>ul',this).slideUp('fast');}
);
});
</script>
jQueryを読み込むのを忘れずに。
.slideDown や .slideUp の他にも色々な効果のスクリプトがある。