テキストで作る。ドロップダウンメニュー・プルダウンメニュー

jquery,CSSを使って、クリックするとサブメニューを表示します。

ヘッダーで、jQuery.jsと後述のdropdown_t.jsを読み込んでいます。
サブメニューはCSSで非表示にしています。
サブメニュー表示の速度は、slow,normal,fast等で変更可。
画像で作る。ドロップダウンメニュー・プルダウンメニューもご参考に。

デモページへ

JSを読み込みます

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/dropdown_t.js"></script>

[dropdown_t.js]JavaScript

$(function(){

	//ドロップダウン表示	   
  $(".mod_dropnavi ul.topmenu li.slidebtn a").addClass("close");
  $(".mod_dropnavi ul.submenu").addClass("close");
	
  $(".mod_dropnavi ul.topmenu li.slidebtn>a").each(function(){
  var allsubmenu = $(".mod_dropnavi ul.submenu");
  var btn = $(this);
  var submenu = $(this).next();
  btn.click(function(){
    if($(this).hasClass("open")){
			$(this).removeClass("open").addClass("close");
			$(submenu).slideUp("fast");
    }else{
			$(allsubmenu).slideUp("fast");
      $(".mod_dropnavi ul.topmenu li.slidebtn a").removeClass("open").addClass("close");
			$(submenu).slideDown("fast");
			$(btn).removeClass("close").addClass("open");
		}
		return false;
		});
  });

});

HTMl

<div class="mod_dropnavi ex_clearfix">
<ul class="topmenu">
<li><a href="#">Menu01</a></li>
<li class="slidebtn"><a href="#">Menu02</a>
<ul class="submenu menu2">
<li><a href="#">Menu02_Aのタイトルが長い場合は幅を指定</a></li>
<li><a href="#">Menu02_B</a></li>
<li><a href="#">Menu02_C</a></li>
</ul>
</li>
<li><a href="#">Menu03</a></li>
<li class="slidebtn"><a href="#">Menu04</a>
<ul class="submenu">
<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>
</li>
</ul>
<!--mod_dropnavi_end --></div>

CSS

/* テキストで作るdrop downリスト
-----------------------------------------*/
/* Topmenu部分 */
.mod_dropnavi ul.topmenu{
	width:920px;
	height:45px;
	border-top:solid 1px #CCC;
	border-bottom:solid 1px #CCC;
	background-color:#336600;
}
.mod_dropnavi ul.topmenu li{
	width:150px;
	float:left;
	position:relative;
	text-align:center;
	line-height:45px;
	border-right:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li a{
	width:100%;
	height:100%;
	display:block;
	color:#FFFFFF;
	font-weight:bold;
}
.mod_dropnavi ul.topmenu li a:link    {text-decoration:none;}
.mod_dropnavi ul.topmenu li a:visited {text-decoration:none;}
.mod_dropnavi ul.topmenu li a:hover   {text-decoration:none; color:#FFFF66;}
.mod_dropnavi ul.topmenu li a:active  {text-decoration:none; color:#FFFF66;}


/* サブメニュー階層は通常は非表示 */
.mod_dropnavi ul.topmenu li.slidebtn ul.close{display:none;}


/* サブ階層部分 */
.mod_dropnavi ul.topmenu li ul.submenu{
	position:absolute;
	top:45px;
	left:-1px;
	white-space:nowrap;
	border-left:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li ul.submenu li{
	height:35px;
	text-align:left;
	line-height:35px;
	text-indent:10px;
	clear:both;
	border-bottom:solid 1px #CCC;
}
.mod_dropnavi ul.topmenu li ul.submenu.menu2 li{
	width:290px;
}
.mod_dropnavi ul.topmenu li ul.submenu li a{
	color:#339900;	
	background-color:#EEE;
}
.mod_dropnavi ul.topmenu li ul.submenu li a:link    {text-decoration:none;}
.mod_dropnavi ul.topmenu li ul.submenu li a:visited {text-decoration:none;}
.mod_dropnavi ul.topmenu li ul.submenu li a:hover   {text-decoration:none; background-color:#DDD; color:#339900;}
.mod_dropnavi ul.topmenu li ul.submenu li a:active  {text-decoration:none; background-color:#DDD; color:#339900;}