首頁 > 開發者 > CSS

CSS + JavaScript 利用display:none/block 構造快顯功能表

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

<!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">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin:0px; padding:0px; border=0; list-style:none; font-family:verdana;}

#nav{font-size:10pt}

#nav a{text-decoration:none}
#nav a:link{color:#999}
#nav a:visited{color:#999}
#nav a:hover{color:black}
#nav a:active{color:#999}

#nav li{width:120px; padding:4px; border:solid 1px; margin:3px; text-align:center; position:relative} /* 整個一級菜單占的長度120+4+1+3=128px */

#nav li ul{display:none; position:absolute; left:129px; top:-4px; background:#fff} /*padding:4px，利用display:none隱藏菜單，background:#fff用於填充空隙，否則IE中有問題*/

/*important for ff */
#nav li ul li a{display:inline-block; background:#eee; border:solid 1px; width: 120px} /*用display將a轉化為塊元素，為右彈效果做準備*/
#nav li ul li a{display:inline-block}
/*設定帶連結子功能表的外觀*/
#nav li ul li a:link{color:black}
#nav li ul li a:visited{color:black}
#nav li ul li a:hover{position:relative; left:8px} /*右彈的效果*/
#nav li ul li a:active{color:black}

#nav li:hover ul, #nav li.over ul{display:block} /*顯示被隱藏的菜單*/

</style>
<script type="text/javascript">
var a = function()
{
var nav = document.getElementById('nav');
var lis = nav.childNodes;
for(var i = 0;i<lis.length;i++)
{
if(lis[i].nodeName=='LI')
{
var childLi = lis[i];
childLi.onmouseover = function(){this.className='over';}
childLi.onmouseout = function(){this.className='';}
}
}
}
window.onload = a;
</script>
</head>
<body>
<ul id="nav">
<li><a href="#1">產品介紹</a>
<ul>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>產品介紹
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>產品介紹
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>產品介紹
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
<li>產品介紹
<ul>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
<li><a href="#1">Link</a></li>
</ul>
</li>
</ul>
</body>
</html>

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

相關關鍵詞：
css block honda free web hosting html css javascript html css and javascript all in one pdf output css css ellipsis css oblique css scheduler
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

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