クリックで表示する吹き出し型ドロップダウンメニュー

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>

[dropdown.js]JavaScript

$(function(){

//global nav
 var btn = $(".mod_dropnavi ul li.parent");
 var submenu = $(".mod_dropnavi_child");
 var submenulink = $(".mod_dropnavi_child ul li a");
	//click
	$(btn).bind("click", "focus", function(event){
     var shownav = $(this).find(".mod_dropnavi_child");
    if($(shownav).css("display")=="none"){
		$(shownav).slideDown("fast");
    }else{
		$(shownav).slideUp("fast");
   }
 });
  //hover
	$(btn).hover(function () {
 	},
  	function () {
    	$(submenu).slideUp("fast");
  });
});

HTMl

<div class="mod_dropnavi ex_clearfix">
<ul>
<li><a href="#">Menu01</a></li>
<li class="parent"><a href="javascript:void(0)">Menu02</a>
  <div class="mod_dropnavi_child">
  <ul>
  <li><a href="#">Menu02_Aのタイトルが長い場合</a></li>
  <li><a href="#">Menu02_B</a></li>
  <li><a href="#">Menu02_C</a></li>
  </ul>
  <!-- /mod_dropnavi_child --></div>
</li>
<li><a href="#">Menu03</a></li>
<li class="parent"><a href="javascript:void(0)">Menu04</a>
  <div class="mod_dropnavi_child">
  <ul>
  <li><a href="#">Menu04_A</a></li>
  <li><a href="#">Menu04_B</a></li>
  <li><a href="#">Menu04_C</a></li>
  <li><a href="#">Menu04_D</a></li>
  </ul>
  <!-- /mod_dropnavi_child --></div>
</li>
</ul>
<!--mod_dropnavi_end --></div>

CSS

/* drop down
-----------------------------------------*/
/* link */
.mod_dropnavi ul li a{
  transition-property: border;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.mod_dropnavi ul li a:link    {text-decoration:none;}
.mod_dropnavi ul li a:visited {text-decoration:none;}
.mod_dropnavi ul li a:hover   {text-decoration:none;}
.mod_dropnavi ul li a:active  {text-decoration:none;}

/* mod_dropnavi */
.mod_dropnavi>ul{
	width:920px;
	height:45px;
  border-bottom:solid 3px #003700;
	background-color:#336600;
}
.mod_dropnavi>ul>li{
	width:150px;
	float:left;
	position:relative;
	text-align:center;
	line-height:45px;
	border-right:solid 1px #003700;
}
.mod_dropnavi>ul>li>a{
	display:block;
	color:#FFFFFF;
	font-weight:bold;
  border-bottom:solid 3px #003700;
}
.mod_dropnavi>ul>li>a:hover   {border-bottom:solid 3px #336600;}
.mod_dropnavi>ul>li>a:active  {border-bottom:solid 3px #336600;}

/* mod_dropnavi_child */
.mod_dropnavi .mod_dropnavi_child{
  display:none;
  position:absolute;
  top:48px;
  left:0px;
  z-index:99;
  padding:12px 0 0 0!important;
	background:transparent url('img/icon_arrow_01.png') no-repeat 10px 0px!important;
}
.mod_dropnavi .mod_dropnavi_child ul{
 padding:4px 27px 16px 27px!important;
 background-color:#003700;
}
.mod_dropnavi .mod_dropnavi_child ul li{
 font-size:90%;
 line-height:1.3;
 text-align:left;
 margin:12px 0 0 0!important;
 white-space:nowrap;
}
.mod_dropnavi .mod_dropnavi_child ul li a{
  padding:0 0 0 12px!important;
  display:inline-block;
	background:transparent url('img/icon_arrow_02.png') no-repeat left 5px!important;
}
.mod_dropnavi .mod_dropnavi_child ul li a:link    {color:#FFF; text-decoration:none;}
.mod_dropnavi .mod_dropnavi_child ul li a:visited {color:#FFF; text-decoration:none;}
.mod_dropnavi .mod_dropnavi_child ul li a:hover   {color:#FFF; text-decoration:underline;}
.mod_dropnavi .mod_dropnavi_child ul li a:active  {color:#FFF; text-decoration:underline;}