<div class="codetitle"> <span><a style="CURSOR: pointer" data="15783" class="copybut" id="copybut15783" onclick="doCopy('code15783')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code15783"> <br><%@page pageEncoding="utf-8" <BR>contentType="text/html;charset=utf-8" %> <br><br><HTML> <br> <br><title>WebForm5</title> <br><br><style>/* ルート = 水平、セカンダリ = 垂直 */ <br>ul#navmenu-h { <br>margin: 0; <br>ボーダー: 0 なし; <br>パディング: 0; <br>幅: 500ピクセル; /*KHTML の場合*/ <br>list-style: none; <br>高さ: 24px; <br>} <br><br>ul#navmenu-h li { <br>マージン: 0; <br>ボーダー: 0 なし; <br>パディング: 0; <br>フロート: 左; /*Gecko の場合*/ <br>display: inline; <br>リストスタイル: なし。 <br>位置: 相対。 <br>高さ: 24px; <br>} <br><br>ul#navmenu-h ul { <br>マージン: 0; <br>ボーダー: 0 なし; <br>パディング: 0; <br>幅: 160ピクセル; <br>リストスタイル: なし; <br>表示: なし。 <br>位置: 絶対。 <br>トップ: 24px; <br>左: 0; <br>} <br><br>ul#navmenu-h ul:after /*IE 7 の準拠性の欠如から*/{ <br>clear: 両方; <br>表示: ブロック; <br>フォント: 1px/0px セリフ; <br>内容: "."; <br>高さ: 0; <br>可視性: 非表示。 <br>} <br><br>ul#navmenu-h ul li { <br>幅: 160px; <br>フロート: 左; /*IE 7 が準拠していない場合*/ <br>display: block ! important; <br>表示: インライン; /*IE の場合*/ <br>} <br><br>/* ルートメニュー */ <br>ul#navmenu-h a { <br>border: 1px Solid #FFF; <br>ボーダー右の色: #CCC; <br>ボーダーボトムカラー: #CCC; <br>パディング: 0 6px; <br>float: なし !重要; /*Opera の場合*/ <br>float: left; /*IE の場合*/ <br>display:block; <br>背景: #EEE; <br>カラー: #666; <br>フォント: 太字 10 ピクセル/22 ピクセル Verdana、Arial、Helvetica、サンセリフ; <br>テキスト装飾: なし。 <br>高さ: 自動 !重要; <br>高さ: 1%; /*IE の場合*/ <br>} <br><br>/* ルート メニューのホバー永続化 */ <br>ul#navmenu-h a:hover, <br>ul#navmenu-h li:hover a, <br>ul#navmenu-h li.iehover a { <br>背景: #CCC; <br>色: #FFF; <br>} <br><br>/* 2 番目のメニュー */ <br>ul#navmenu-h li:hover li a, <br>ul#navmenu-h li.iehover li a { <br>float: none ; <br>背景: #EEE; <br>カラー: #666; <br>} <br><br>/* 2 番目のメニュー ホバー永続性 */ <br>ul#navmenu-h li:hover li a:hover, <br>ul#navmenu-h li:hover li:hover a, <br>ul#navmenu-h li.iehover li a:hover, <br>ul#navmenu-h li.iehover li.iehover a { <br>background: #CCC; <br>色: #FFF; <br>} <br><br>/* 3 番目のメニュー */ <br>ul#navmenu-h li:hover li:hover li a, <br>ul#navmenu-h li.iehover li.iehover li a { <br>背景: #EEE; <br>カラー: #666; <br>} <br><br>/* 3 番目のメニュー ホバー永続性 */ <br>ul#navmenu-h li:hover li:hover li a:hover, <br>ul#navmenu-h li:hover li: hover li:hover a, <br>ul#navmenu-h li.iehover li.iehover li a:hover, <br>ul#navmenu-h li.iehover li.iehover li.iehover a { <br>background: # CCC; <br>色: #FFF; <br>} <br><br>/* 4 番目のメニュー */ <br>ul#navmenu-h li:hover li:hover li:hover li a, <br>ul#navmenu-h li.iehover li.iehover li.iehover li a { <br>背景: #EEE; <br>カラー: #666; <br>} <br><br>/* 4 番目のメニュー ホバー */ <br>ul#navmenu-h li:hover li:hover li:hover li a:hover, <br>ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { <br>背景: #CCC; <br>色: #FFF; <br>} <br><br>ul#navmenu-h ul ul、<br>ul#navmenu-h ul ul ul { <br>表示: なし; <br>位置: 絶対。 <br>トップ: 0; <br>左: 160ピクセル; <br>} <br><br>/* 移動しないでください - Gecko の場合は display:block の前に来る必要があります */ <br>ul#navmenu-h li:hover ul ul, <br>ul#navmenu-h li: hover ul ul ul、<br>ul#navmenu-h li.iehover ul ul、<br>ul#navmenu-h li.iehover ul ul ul { <br>表示: なし; <br>} <br><br>ul#navmenu-h li:hover ul, <br>ul#navmenu-h ul li:hover ul, <br>ul#navmenu-h ul ul li:hover ul, <br>ul#navmenu-h li.iehover ul, <br>ul#navmenu-h ul li.iehover ul, <br>ul#navmenu-h ul ul li.iehover ul { <br>display: block; <br>} <br><br></style><script language="javascript"> <br>navHover = function() { <br>var lis = document.getElementById("navmenu-h").getElementsByTagName("LI"); <br>for (var i=0; i<lis.length i>lis[i].onmouseover=function() { <br>this.className =" iehover"; <br>} <br>lis[i].onmouseout=function() { <br>this.className=this.className.replace(new RegExp(" iehover\b"), <br><br>"") ; <br>} <br>} <br>}<br>if (window.attachEvent) window.attachEvent("onload", navHover); <br></script> <br> <br> <br><ul id="navmenu-h"> <br><li><a href="#">ルート ナビゲーション アイテム 1</a> <br><ul> <br><li><a href="#">サブナビゲーション項目1</a></li> <br><li><a href="#">サブナビゲーション項目 1-2</a></li> <br> </ul> <br></li> <br><li><a href="#">ルート ナビゲーション アイテム 2</a> <br><ul> <br><li><a href="#">サブナビゲーション項目2</a></li> <br><li><a href="#">サブナビゲーション項目 2-2</a></li> <br> </ul> <br></li> <br><li><a href="#">ルート ナビゲーション項目 3</a> <br><ul> <br><li><a href="#">サブナビゲーション項目3</a></li> <br><li><a href="#">サブナビゲーション項目 3-2</a></li> <br> </ul> <br></li> <br> <br></body> <br></html> <br></lis.length> </div>
