首頁 > 開發者 > JavaScript

css結合js製作下拉式功能表的具體實現

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

css結合js製作下拉式功能表的具體實現

 這篇文章主要介紹了css結合js製作下拉式功能表的具體實現,需要的朋友可以參考下

 代碼如下:

<%@page pageEncoding="utf-8" 

contentType="text/html;charset=utf-8" %> 

 

<HTML> 

<HEAD> 

<title>WebForm5</title> 

 

<style>/* Root = Horizontal, Secondary = Vertical */ 

ul#navmenu-h { 

margin: 0; 

border: 0 none; 

padding: 0; 

width: 500px; /*For KHTML*/ 

list-style: none; 

height: 24px; 

} 

 

ul#navmenu-h li { 

margin: 0; 

border: 0 none; 

padding: 0; 

float: left; /*For Gecko*/ 

display: inline; 

list-style: none; 

position: relative; 

height: 24px; 

} 

 

ul#navmenu-h ul { 

margin: 0; 

border: 0 none; 

padding: 0; 

width: 160px; 

list-style: none; 

display: none; 

position: absolute; 

top: 24px; 

left: 0; 

} 

 

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{ 

clear: both; 

display: block; 

font: 1px/0px serif; 

content: "."; 

height: 0; 

visibility: hidden; 

} 

 

ul#navmenu-h ul li { 

width: 160px; 

float: left; /*For IE 7 lack of compliance*/ 

display: block !important; 

display: inline; /*For IE*/ 

} 

 

/* Root Menu */ 

ul#navmenu-h a { 

border: 1px solid #FFF; 

border-right-color: #CCC; 

border-bottom-color: #CCC; 

padding: 0 6px; 

float: none !important; /*For Opera*/ 

float: left; /*For IE*/ 

display: block; 

background: #EEE; 

color: #666; 

font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; 

text-decoration: none; 

height: auto !important; 

height: 1%; /*For IE*/ 

} 

 

/* Root Menu Hover Persistence */ 

ul#navmenu-h a:hover, 

ul#navmenu-h li:hover a, 

ul#navmenu-h li.iehover a { 

background: #CCC; 

color: #FFF; 

} 

 

/* 2nd Menu */ 

ul#navmenu-h li:hover li a, 

ul#navmenu-h li.iehover li a { 

float: none; 

background: #EEE; 

color: #666; 

} 

 

/* 2nd Menu Hover Persistence */ 

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 { 

background: #CCC; 

color: #FFF; 

} 

 

/* 3rd Menu */ 

ul#navmenu-h li:hover li:hover li a, 

ul#navmenu-h li.iehover li.iehover li a { 

background: #EEE; 

color: #666; 

} 

 

/* 3rd Menu Hover Persistence */ 

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 { 

background: #CCC; 

color: #FFF; 

} 

 

/* 4th Menu */ 

ul#navmenu-h li:hover li:hover li:hover li a, 

ul#navmenu-h li.iehover li.iehover li.iehover li a { 

background: #EEE; 

color: #666; 

} 

 

/* 4th Menu Hover */ 

ul#navmenu-h li:hover li:hover li:hover li a:hover, 

ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { 

background: #CCC; 

color: #FFF; 

} 

 

ul#navmenu-h ul ul, 

ul#navmenu-h ul ul ul { 

display: none; 

position: absolute; 

top: 0; 

left: 160px; 

} 

 

/* Do Not Move - Must Come Before display:block for 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 { 

display: none; 

} 

 

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 { 

display: block; 

} 

 

</style><script language="javascript"> 

navHover = function() { 

var lis = document.getElementById("navmenu-h").getElementsByTagName("LI"); 

for (var i=0; i<lis.length; i++) { 

lis[i].onmouseover=function() { 

this.className+=" iehover"; 

} 

lis[i].onmouseout=function() { 

this.className=this.className.replace(new RegExp(" iehoverb"), 

 

""); 

} 

} 

} 

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="#">Root 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> 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More