{ 在先前的ＨＴＭＬ裡，元素的位置只能依序排列，我們很難精確地定位與控制網頁中的一些元素。 ＣＳＳ２?ＣａｓｃａｄｉｎｇＳｔｙｌｅ Ｓｈｅｔｔ Ｌｅｖｅｙｆｙ５ｆｙ?屬性出現並得到瀏覽器的廣泛支援之後，我們不僅可以靜態地實現以上目的，而且可以根據滑鼠、鍵盤、時間等預定義好的外在事件動態地改變佈局。時下非常流行的網頁中「活動的層」便是它的一種形象的運用，我們這裡要講的是如何運用這些屬性結合一些ＤＨＴＭＬ對像在網頁中實現類似Ｗｉｎｄｏｗｓ窗口的下拉菜單（如圖所示）。請看以下程式碼及詳細說明。
＜?－－ 以下部分應插在代碼的＜ｈｅａｄ＞之後－－＞
＜ｓｔｙｌｅ＞＜?－－
／? 這是一些ＣＳＳ樣式。其中″ｂｔｎＴＤ″是按鈕在被按下之前「凸起」的樣式類：邊框被設定為寬度為１個像素的實線，其中左邊框和上邊框顏色為淺色（這裡為白色），右下邊框為深色（深灰色），如果背景為灰色的ＨＴＭＬ元素（如單元格）使用這個樣式的話，那就非常像一個“凸出”的按鈕；“ｂｔｎＤＴＤ”是按鈕被按下時“凹下”的樣式。 ?／
． ｂｔｎＴＤ ? ｂｏｒｄｅｒ－ｌｅｆｔ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ? ｂｏｒｄｅｒ－ｒｉｇｈｔ? １ ｓｏｌｉｄ ＃８０８０８０?
ｂｏｒｄｅｒ－ｔｏｐ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ? ｂｏｒｄｅｒ－ｂｏｔｔｏｍ? １ ｓｏｌｉｄ ＃８０８０８０? ?
． ｂｔｎＤＴＤ ? ｂｏｒｄｅｒ－ｌｅｆｔ? １ ｓｏｌｉｄ ＃８０８０８０? ｂｏｒｄｅｒ－ｒｉｇｈｔ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ?
ｂｏｒｄｅｒ－ｔｏｐ? １ ｓｏｌｉｄ ＃８０８０８０? ｂｏｒｄｅｒ－ｂｏｔｔｏｍ? １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ? ?
ｔｄ ? ｆｏｎｔ－ｆａｍｉｌｙ? 宋體? ｆｏｎｔ－ｓｉｚｅ ? ９ｐｔ ?
－－＞＜／ｓｔｙｌｅ＞
＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜?－－
／／判斷哪個按鈕被按下的全局變量
ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０?
／／鼠標經過、離開、點擊更改單元格ＣＳＳ樣式的函數
ｆｕｎｃｔｉｏｎ ｍＯｖｒｅｕｆｆ ｒｒｅｅ?
ｔｉｖｅ?ｓｔｒＣｏｌｓｓｕｓ｢｣｣ｓｓｓｈ? ｓｔｒＣｕｒｓｏｒ?
ａｒｇｖ＝ｍＯｖｒＯｕｔ． ａｒｇｕｍｅｎｔｓ?ａｒｇｃ＝ａｒｇｖ． ｌｅｎｇｔｈ?
／?預設情況下不將目前物件置為「啟動」?／
ｂｌｎＡｃｔｉｖｅ＝?ａｒｙ＞５ ｅｖａｌ?ａｒｇｖ［１］??ｆａｌｓｅ?
／?預設滑鼠經過目前物件的樣式為「凸出」２２２２２２２２２２２２２
ａｒｇｖ［２］?＝′′?﹖ ａｒｇｖ［２］?′ｂｔｎＴＤ′?
／?默認鼠標點擊的時候當前對象為“凹下的按鈕形”?／
ｓｔｒＣｌａｓｓＤ＝?ａｒｇｃ＞３ ＆＆ ａｒｇｖ［３］?＝′′?﹖ ａｒｇ［３］?′ｂｔｎＤＴＤ′?
／?將目前物件啟動時候的前景色為白色、背景色為藍色、滑鼠樣式為手形?ｆｆｆｆ?
ｔｒＢｇＣｏｌｏｒ＝′＃００００８０′?ｓｔｒＣｕｒｓｆ２＝＝｣Ｃｓｒ２＝＝］Ｃ｢ ′ｈａｎｄ′?
／?ＩＥ４及其更高版本才支持這些ＪａｖａＳｃｒｉｐｔ對ＣＳＳ 樣式的動態改變?
． ａｌｌ??
／／將目前物件的滑鼠樣式置為參數傳遞值
ｏｂｊＳｒｃ． ｓｔｙｌｅ． ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ?
／／如果是鼠標進入當前對象範圍
ｉｆ??ｏｂｊＳｒｃ． ｃｏｎｔａｉｎｓ?ｅｖｅｎｔ． ｆｒｏｍＥｌｅｍｅｎｔ???
／?設定為活動樣式?／
ｉｆ?ｂｌｎＡｒｔｉｅ? ? ? ｂｇＣｏｌｏｒ?ｏｂｊＳｒｃ． ｓｔｙｌｅ． ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ? ?
／?當前對像不需要置為活動樣式的時候，如果本來的
樣式是“凸出的按鈕ｅｅｅ ，反之亦然
ｃｌａｓｓＮａｍｅ＝?ｉｎｔＢｌｎＣｌｋ?＝０?０?０?０ ｓｔｒＣｌａｓｓＤ?ｓｔｒＣｌａｓｓ? ?
/／滑鼠離開目前物件區域ｅｒｅｅ
? ｃｏｎｔａｉｎｓ?ｅｖｅｎｔ． ｔｏＥｌｅｍｅｎｔ???
／／將這些樣式置為預設值
ｏｂｊＳｒｃ． ｂｇＣｏｌｏｒ＝′′?ｏｂｊＳｒｃ． ｓｔｙｌｅ． ｃｏｌｏｒ＝′′?ｏｂｊＳｒｃ． ｃｌａｓｓＮａｍｅ＝′′? ?
??
／? 顯示／隱藏層的通用函數。以ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ作為參數，其中ｏｂｊＮ５％層」對象，ｓｔｒＳｔｕ為層的狀態。因為篇幅所限，請查看本文尾部說明。 ?／
ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ????
／? 調用上面傳遞的函數，顯示隱藏參數的層，這樣是這樣傳遞參數的層，這樣是這樣傳遞代碼。這裡不給出詳細函數。 ?／
ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒ?ｉｎｔＣｕｒｒｅｎｔ???
／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞
＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆ?ｗｉｎｄｏｗ．ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′? ｓｈｏｗＬａｙｅｒ?１?′ｈｉｄｅ′ ?″＞
＜?－－ 以上ｂｏｄｙ部分的作用是當滑鼠沒有按下任何按鈕的時候隱藏所有應該隱藏的「選單」。以下是兩個用ＣＳＳ佈局定義的層，名為“ｍｅｎｕ”的層的初始狀態為：在屏幕上的絕對位置為（１２?１２），可視，層ｚ－ｉｎｄｅｘ屬性為１００；“ｍｅｎｕ１”為不可視。 －－＞
＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ?ａｂｓｏｌｕｔｅ?ｖｉｓｉｂｉｌｉｔｙ? ｖｉｓｉｂｌｅ?ｌｅｆｔ?１２ｐｘ?ｔｏｐ?１２ｐｘ? ｚ－ｉｎｄｅｘ? １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝ ″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞
＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?″ ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?ｆａｌｓｅ?′ｂｔｎＤＴＤ′? ?ｓｈｏｗＬａｙｅｒ?１?″＞天極網＜／ｔｄ＞＜／ｔｒ＞
＜／ｔａｂｌｅ＞＜／ｄｉｖ＞
＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎ?ａｂｓｏｌｕｔｅ?ｖｉｓｉｂｉｌｉｔｙ? ｈｉｄｄｅｎ?ｌｅｆｔ?１１ｐｘ?ｔｏｐ?３４ｐｘ ? ｚ－ｉｎｄｅｘ? １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞
＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?ｔｒｕｅ ?″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔ?ｔｈｉｓ?″ ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ?／／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′?ｓｈｏｗＬａｙｅｒ?１?′ｈｉｄｅ′?″＞電腦報讀者俱樂部＜／ｔｄ＞＜／ｔｒ＞
＜／ｔａｂｌｅ＞＜／ｄｉｖ＞
因為篇幅所限，某些函數不能給予詳細說明，若 ｔｉｔｔｔｔ、ｔｔ、ｔｔ、ｔｔｔ、ｔｔ、ｔｔｔ、ｔｔ、ｔｔｔ、ｔｔｔｔｔｔｔｔ、ｔｔｔｔｔ4ｔｔｔｔｔｔ、ｔｔｔｔｔｔｔｉ中給予詳細說明。 ｔ． ｔｏｐｃｏｏｌ． ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ． ｈｔｍｌ。