実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/piroBox.1_2.js"></script>
<script type="text/javascript">
$(function(){
/* アイテムの開閉 */
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
/* 入れ子のリストがあるアイテムに「>>」を付加 */
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/img/ajax/jquery/css_pirobox/white/style.css" />
<style type="text/css">
body { background:#fff; }
ul,li { list-style:none; margin:0; padding:0; }
/* 第1階層 */
ul.dropdown { position:relative; height:500px;}
ul.dropdown li { font-weight:bold; float:left; zoom:1; background:#ccc; }
ul.dropdown a:hover { color:#000; }
ul.dropdown a:active { color:#ffa500; }
ul.dropdown li a { display:block; padding:4px 8px; border-right:1px solid #333; text-decoration:none; color:#222; }
ul.dropdown li:last-child a { border-right:none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { background:#F3D673; color:black; position:relative; }
ul.dropdown li.hover a { color:black; }
/* 第2階層 */
ul.dropdown ul { width:23em; visibility:hidden; position:absolute; top:100%; left:0; }
ul.dropdown ul li { font-weight:normal; background:#eee; color:#000; border-bottom:1px solid #ccc; float:none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right:none; width:100%; display:inline-block; }
/* 第3階層 */
ul.dropdown ul ul { left:100%; top:0; }
ul.dropdown li:hover >ul { visibility:visible; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://css-tricks.com/simple-jquery-dropdowns/'>Simple jQuery Dropdowns</a></p>
<!-- CODE -->
<ul class="dropdown">
<li><a href="#">携帯サイトの作り方</a>
<ul class="sub_menu">
<li><a href='./?t=mobile&p=spec'>携帯コンテンツ作成技術情報・開発ツール</a>
<ul>
<li><a href='./?t=mobile&p=spec#a_spec'>各キャリア公式サイトの技術情報</a></li>
<li><a href='./?t=mobile&p=spec#a_emulator'>エミュレータ</a></li>
<li><a href='./?t=mobile&p=spec#a_addon'>携帯サイト制作に便利なFirefoxアドオン</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=xhtmlbasic11'>携帯対応HTML/XHTMLタグ一覧</a>
<ul>
<li><a href='./?t=mobile&p=xhtmlbasic11#a_tag'>使用可能なタグ一覧</a></li>
<li><a href='./?t=mobile&p=xhtmlbasic11#a_support'>各キャリアのHTML/XHTML対応状況</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=rule'>XHTMLの記述ルール</a></li>
<li><a href='./?t=mobile&p=common_attribute'>共通属性</a></li>
<li><a href='./?t=mobile&p=data_type'>属性型／独自拡張属性</a>
<ul>
<li><a href='./?t=mobile&p=data_type#a_attribute_type'>属性型</a></li>
<li><a href='./?t=mobile&p=data_type#a_data_type'>データ型</a></li>
<li><a href='./?t=mobile&p=data_type#a_extention_attribute'>独自拡張属性（キャリア共通）</a></li>
<li><a href='./?t=mobile&p=data_type#a_extention_attribute_docomo'>独自拡張属性（docomoのみ）</a></li>
<li><a href='./?t=mobile&p=data_type#a_extention_attribute_au'>独自拡張属性（auのみ）</a></li>
<li><a href='./?t=mobile&p=data_type#a_attribute'>その他の属性</a></li>
<li><a href='./?t=mobile&p=data_type#a_property'>プロパティ</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=speclimit'>携帯サイト作成時の注意点（制限事項含む）</a>
<ul>
<li><a href='./?t=mobile&p=speclimit#a_imageformat'>画像フォーマット</a></li>
<li><a href='./?t=mobile&p=speclimit#a_filesize'>ファイルサイズなどの容量制限</a></li>
<li><a href='./?t=mobile&p=speclimit#a_script'>JavaScript・スタイルシート（CSS）対応状況</a></li>
<li><a href='./?t=mobile&p=speclimit#a_charset'>文字コード</a></li>
<li><a href='./?t=mobile&p=speclimit#a_caution'>携帯サイト作成上の注意点</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">携帯対応HTML/XHTMLタグ</a>
<ul class="sub_menu">
<li><a href='./?t=mobile&p=basic'>コメント／XML宣言／DOCTYPE宣言</a></li>
<li><a href='./?t=mobile&p=structure_module'>構造モジュール</a>
<ul>
<li><a href='./?t=mobile&p=structure_module#a_html'>html〔(X)HTML文書のルート〕</a></li>
<li><a href='./?t=mobile&p=structure_module#a_head'>head〔ページのヘッダ情報 〕</a></li>
<li><a href='./?t=mobile&p=structure_module#a_title'>title〔ページのタイトル〕</a></li>
<li><a href='./?t=mobile&p=structure_module#a_body'>body〔ページの本文〕</a></li>
</ul>
</li>
<li><a href='./?t=mobile&p=text_module'>テキストモジュール</a></li>
<li><a href='./?t=mobile&p=hypertext_module'>ハイパーテキストモジュール</a></li>
<li><a href='./?t=mobile&p=list_module'>リストモジュール</a></li>
<li><a href='./?t=mobile&p=forms_module'>フォームモジュール</a></li>
<li><a href='./?t=mobile&p=basic_tables_module'>基本テーブルモジュール</a></li>
<li><a href='./?t=mobile&p=image_module'>イメージモジュール</a></li>
<li><a href='./?t=mobile&p=object_module'>オブジェクトモジュール</a></li>
<li><a href='./?t=mobile&p=presentation_module'>視覚効果モジュール</a></li>
<li><a href='./?t=mobile&p=metainformation_module'>メタ情報モジュール</a></li>
<li><a href='./?t=mobile&p=link_module'>関連リンクモジュール</a></li>
<li><a href='./?t=mobile&p=base_module'>基準モジュール</a></li>
<li><a href='./?t=mobile&p=stylesheet_module'>スタイルシートモジュール</a></li>
<li><a href='./?t=mobile&p=html'>その他</a></li>
<li><a href='./?t=mobile&p=frame'>フレームモジュール</a></li>
<li><a href='./?t=mobile&p=emoji'>絵文字</a></li>
</ul>
</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>