最初の宣言：
私は長年にわたってWebのフロントエンドの位置で働いてきましたが、その位置には高い技術的要件はありません。 HTMLとCSSはより頻繁に使用され、元のJavaScriptはほとんどなく、基本的にコピー修飾されています。だから私が本当に書いたとき、私は基礎が堅実ではなく、私は学び、練習し、多くを得ることがわかった。
複製画像：
これ以上のナンセンスはありません、郵便番号
1。CSSコード
コードコピーは次のとおりです。
A：link {color：white; Text-Decoration：none;}
A：訪問{color：white; Text-decorative：none;}
A：Hover {color：white; Text-decorative：none;}
A：Active {color：white; Text-decorative：none;}
li {float：left; display：inline; background-color：＃003366; width：120px; text-align：center; margin：2px; padding：10px 0 5px 0; position：relative;}
.limouseover {background-color：＃0033ff; color：red;}
.limouseout {background-color：＃003366; color：black;}
li ul {display：none; width：120px; position：absolute; left：0; top：30px;}
li ul li {マージン：0px auto; border-top：1px solid＃006699;}
2。JavaScriptコード
コードコピーは次のとおりです。
<スクリプト言語= javascript>
関数メニュー（menu1）{
//マウスを移動し、クラス名を切り取り、トグルを非表示にしてトグルを表示します。
if（document.getElementById（menu1））{
var menu_ul = document.getElementById（menu1）;
if（menu_ul.getelementsbytagname（ "li"）。長さ）{
var menu_li = menu_ul.getelementsbytagname（ "li"）;
for（i in menu_li）{
menu_li [i] .onmouseover = function（）{this.classname = "limouseover"; if（this.getelementsbytagname（ "ul"）。length）{this.getelementsbytagname（ "ul"）[0] .style.display = "block";}}}
menu_li [i] .onmouseout = function（）{this.classname = "limouseout"; if（this.getelementsbytagname（ "ul"）。length）{this.getelementsbytagname（ "ul"）[0] .style.display = "none";}}}}
}
}
}
}
</script>
3。HTMLコード
コードコピーは次のとおりです。
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = "">メニュー1メニュー1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = "">メニュー2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<Script> var menu1 = new Menu（ "menu1"）; </script>
説明：
1. ULページとLIページがより頻繁に使用されることを考慮すると、メニュースタイルの範囲を制限するためにCSSの前に＃menu1を追加できます。
2。JSは主にマウスの動きと除去イベントを聴き、リムハウスオーバーとリムアウトスタイルに切り替えます。同時に、submenuの表示属性を変更して、非表示の機能を実現します。
3.同じページは、競合することなく繰り返し呼ぶことができます。 HTMLコードのJavaScriptコードは、コールインスタンスです。前のメニュー1は任意の変数名で、ブラケットのMENK1はHTMLページのIDです。
この例の短所：
1.メニューLiのマウスオーバー、マウスアウト、およびサブメニューLiは同じです。つまり、同じ色とフォントであり、個別の設定はありません。
2。IE6およびIE7と互換性があるため、位置：絶対が使用され、左と上部の属性が追加されます。上部は、メニューLIの全体的な高さに応じて設定する必要があります。