<ul id="menu">
  <li>
   首都圏
    <ul id="shuto" class="submenu">
      <li><a href="javascript:void(0)">東京都</a></li>
      <li><a href="javascript:void(0)">神奈川県</a></li>
      <li><a href="javascript:void(0)">埼玉県</a></li>
      <li><a href="javascript:void(0)">千葉県</a></li>
    </ul>
  </li>
  <li>
   近畿圏
    <ul id="kinki" class="submenu">
      <li><a href="javascript:void(0)">大阪府</a></li>
      <li><a href="javascript:void(0)">京都府</a></li>
      <li><a href="javascript:void(0)">兵庫県</a></li>
    </ul>
  </li>
  <li>
   中部圏
    <ul id="chubu" class="submenu">
      <li><a href="javascript:void(0)">愛知県</a></li>
      <li><a href="javascript:void(0)">岐阜県</a></li>
      <li><a href="javascript:void(0)">三重県</a></li>
    </ul>
  </li>
</ul>

$(document).ready(function() {
  $('ul#menu>li').hover
      (function(ev) {
         $('ul.submenu').hide();
         var menuTop=$(this).offset().top;
         var menuLeft=$(this).offset().left + $(this).width();
         $(this).children(':hidden')
                .css({top:menuTop,left:menuLeft})
                .show();
       },function(ev) {
         $('ul.submenu').hide();
   } );

//サブメニューがクリックされたら項目を表示し、サブメニューを非表示に
   $('ul.submenu a').click(function() {
     $('<div />').text('クリックされたのは'+$(this).text())
            .appendTo(document.body);
     $('ul.submenu').hide();
   } );
} );