复制代码代码如下:
<٪@page pageencoding = "utf-8"
contentType = "text/html ؛ charset = utf-8" ٪>
<html>
<head>
<title> webform5 </itlem>
<style>/ * root = أفقي ، ثانوي = رأسي */
ul#navmenu-h {
الهامش: 0 ؛
الحدود: 0 لا شيء ؛
الحشو: 0 ؛
العرض: 500 بكسل ؛ /*ل khtml*/
على غرار القائمة: لا شيء ؛
الارتفاع: 24 بكسل ؛
}
ul#navmenu-h li {
الهامش: 0 ؛
الحدود: 0 لا شيء ؛
الحشو: 0 ؛
تعويم: اليسار. /*لـ Gecko*/
العرض: مضمّن ؛
على غرار القائمة: لا شيء ؛
الموقف: قريب
الارتفاع: 24 بكسل ؛
}
ul#navmenu-h ul {
الهامش: 0 ؛
الحدود: 0 لا شيء ؛
الحشو: 0 ؛
العرض: 160 بكسل ؛
على غرار القائمة: لا شيء ؛
العرض: لا شيء ؛
الموقف: مطلق ؛
أعلى: 24 بكسل ؛
اليسار: 0 ؛
}
UL#NAVMENU-H UL: بعد /*من IE 7 عدم الامتثال* /{
واضح: كلاهما ؛
العرض: كتلة ؛
الخط: 1px/0px serif ؛
محتوى: "."؛
الارتفاع: 0 ؛
الرؤية: مخفية ؛
}
ul#navmenu-h ul li {
العرض: 160 بكسل ؛
تعويم: اليسار. /*ل IE 7 عدم الامتثال*/
العرض: كتلة! مهمة ؛
العرض: مضمّن ؛ /*ل IE*/
}
/ * قائمة الجذر */
ul#navmenu-h a {
الحدود: 1px الصلبة #FFF ؛
اللون اليميني الحدود: #CCC ؛
بلون الحدود: #CCC ؛
الحشو: 0 6px ؛
تعويم: لا شيء! مهم ؛ /*للأوبرا*/
تعويم: اليسار. /*ل IE*/
العرض: كتلة ؛
الخلفية: #EEE ؛
اللون: #666 ؛
الخط: Bold 10px/22px Verdana ، Arial ، Helvetica ، Sans-Serif ؛
تدمير النص: لا شيء ؛
الارتفاع: Auto! مهم ؛
الارتفاع: 1 ٪ ؛ /*ل IE*/
}
/ * قائمة الجذر تحوم المثابرة */
ul#navmenu-h a: hover ،
ul#navmenu-h li: hover a ،
ul#navmenu-h li.iehover a {
الخلفية: #CCC ؛
اللون: #fff ؛
}
/ * القائمة الثانية */
ul#navmenu-h li: hover li a ،
ul#navmenu-h li.iehover li a {
تعويم: لا شيء ؛
الخلفية: #EEE ؛
اللون: #666 ؛
}
/ * القائمة الثانية تحوم الثبات */
ul#navmenu-h li: hover li a: hover ،
ul#navmenu-h li: hover li: hover a ،
ul#navmenu-h li.iehover li a: hover ،
ul#navmenu-h li.iehover li.iehover a {
الخلفية: #CCC ؛
اللون: #fff ؛
}
/ * القائمة الثالثة */
ul#navmenu-h li: hover li: hover li a ،
ul#navmenu-h li.iehover li.iehover li a {
الخلفية: #EEE ؛
اللون: #666 ؛
}
/ * القائمة الثالثة تحوم الثبات */
ul#navmenu-h li: hover li: hover li a: hover ،
ul#navmenu-h li: hover li: hover li: hover a ،
ul#navmenu-h li.iehover li.iehover li a: hover ،
ul#navmenu-h li.iehover li.iehover li.iehover a {
الخلفية: #CCC ؛
اللون: #fff ؛
}
/ * القائمة الرابعة */
ul#navmenu-h li: hover li: hover li: hover li a ،
ul#navmenu-h li.iehover li.iehover li.iehover li a {
الخلفية: #EEE ؛
اللون: #666 ؛
}
/ * القائمة الرابعة تحوم */
ul#navmenu-h li: hover li: hover li: hover li a: hover ،
ul#navmenu-h li.iehover li.iehover li.iehover li a: hover {
الخلفية: #CCC ؛
اللون: #fff ؛
}
ul#navmenu-h ul ul ،
ul#navmenu-h ul ul {
العرض: لا شيء ؛
الموقف: مطلق ؛
أعلى: 0 ؛
اليسار: 160 بكسل ؛
}
/ * لا تتحرك - يجب أن تأتي قبل العرض: كتلة لـ Gecko */
ul#navmenu-h li: Hover Ul Ul ،
ul#navmenu-h li: hover ul ul ul ،
ul#navmenu-h li.iehover ul ul ،
ul#navmenu-h li.iehover ul ul {
العرض: لا شيء ؛
}
UL#NAVMENU-H LI: Hover UL ،
ul#navmenu-h ul li: hover ul ،
ul#navmenu-h ul ul li: hover ul ،
ul#navmenu-h li.iehover ul ،
ul#navmenu-h ul li.iehover ul ،
ul#navmenu-h ul ul li.iehover ul {
العرض: كتلة ؛
}
</style> <script language = "javaScript">
navhover = function () {
var lis = document.getElementById ("navmenu-h"). getElementsByTagName ("li") ؛
لـ (var i = 0 ؛ i <lis.length ؛ i ++) {
lis [i] .onmouseover = function () {
this.className+= "iehover" ؛
}
lis [i] .onmouseout = function () {
this.classname = this.classname.replace (regexp جديد ("iehover // b") ،
"") ؛
}
}
}
if (window.attachevent) window.attachevent ("onload" ، navhover) ؛
</script>
</head>
<body>
<ul id = "navmenu-h">
<li> <a href = "#"> root nav item1 </a>
<ul>
<li> <a href = "#"> sub nav item1 </a> </li>
<li> <a href = "#"> sub nav item1-2 </a> </li>
</ul>
</li>
<li> <a href = "#"> الجذر NAV item2 </a>
<ul>
<li> <a href = "#"> sub nav item2 </a> </li>
<li> <a href = "#"> sub nav item2-2 </a> </li>
</ul>
</li>
<li> <a href = "#"> root nav item3 </a>
<ul>
<li> <a href = "#"> sub nav item3 </a> </li>
<li> <a href = "#"> sub nav item3-2 </a> </li>
</ul>
</li>
</ul>
</body>
</html>