對于如今熱衷于網頁設計的愛好者們來說，單調的網頁效果已經遠遠不能滿足他們新奇的心理了。本文就來介紹一種簡單的下拉菜單的制作。只要你懂得一點點HTML的知識，就可以。即使什么也不懂，照葫蘆畫瓢也行，呵呵。 
第一步，定義下拉菜單JS代碼 
以下是引用片段：
＜SCRIPTlanguage=JavaScript＞ 
＜!-- 
functionMM_findObj(n,d){//v4.01 
varp,i,x;if(!d)d=document;if((p=n.indexOf("?"))＞0&&parent.frames.length){ 
d=parent.frames[n.substring(p+1)].document;n=n.substring(0,p);} 
if(!(x=d[n])&&d.all)x=d.all[n];for(i=0;!x&&i＜d.forms.length;i++)x=d.forms[i][n]; 
for(i=0;!x&&d.layers&&i＜d.layers.length;i++)x=MM_findObj(n,d.layers[i].document); 
if(!x&&d.getElementById)x=d.getElementById(n);returnx; 
} 
functionMM_showHideLayers(){//v6.0 
vari,p,v,obj,args=MM_showHideLayers.arguments; 
for(i=0;i＜(args.length-2);i+=3)if((obj=MM_findObj(args[i]))!=null){v=args[i+2]; 
if(obj.style){obj=obj.style;v=(v==show)?visible:(v==hide)?hidden:v;} 
obj.visibility=v;} 
} 
//--＞ 
＜/SCRIPT＞
第二步，在適當的位置插入目錄菜單 
以下是引用片段：
＜TABLEborderColor=#ffffffheight=25width=150align=leftbgColor=#ccccccborder=1＞ 
＜TBODY＞＜TR＞ 
＜TD 
onmouseover="MM_showHideLayers(Layer2,,hide,Layer1,,show)" 
borderColorLight=#000000width=100bgColor=#ccccffheight=15＞ 
＜DIValign=center＞＜A 
onclick="MM_showHideLayers(Layer2,,hide,Layer1,,show)" 
href="2#"＞網上書店＜/A＞＜/DIV＞＜/TD＞ 
＜TD 
onmouseover="MM_showHideLayers(Layer2,,show,Layer1,,hide)" 
borderColorLight=#000000width=100bgColor=#ccccffheight=15＞ 
＜DIValign=center＞＜A 
onclick="MM_showHideLayers(Layer2,,show,Layer1,,hide)" 
href="1#"＞書盤目錄＜/A＞＜/DIV＞＜/TD＞ 
＜/TR＞ 
＜/TBODY＞ 
＜/TABLE＞
第三步，插入隱藏層的定義. 
以下是引用片段：
＜DIVid=Layer1style="Z-INDEX:1;VISIBILITY:hidden;POSITION:absolute;TOP:42px;LEFT:12px;WIDTH:88px;HEIGHT:163px" ＞ 
＜TABLEborderColor=#ffffffbgColor=#ccccffborderColorLight=#000000border=1onmouseover="MM_showHideLayers 
(Layer1,,show)"onmouseout="MM_showHideLayers(Layer1,,hide)"＞ 
＜TBODY＞ 
＜TR＞ 
＜TDheight=15＞ 
＜DIValign=center＞＜Ahref="A#"＞最新圖書＜/A＞＜/DIV＞＜/TD＞＜/TR＞ 
＜TR＞ 
＜TDheight=15＞ 
＜DIValign=center＞＜Ahref="S#"＞熱點圖書＜/A＞＜/DIV＞＜/TD＞＜/TR＞ 
＜TR＞ 
＜TDheight=15＞ 
＜DIValign=center＞＜Ahref="D#"＞隆重推出＜/A＞＜/DIV＞＜/TD＞＜/TR＞ 
＜/TBODY＞＜/TABLE＞ 
＜/DIV＞ 
＜DIVid=Layer2style="Z-INDEX:1;VISIBILITY:hidden;POSITION:absolute;TOP:42px;LEFT:85px;WIDTH:120px;HEIGHT:127px" 
＞ 
＜TABLEborderColor=#ffffffbgColor=#ccccFFborderColorLight=#000000border=1onmouseover="MM_showHideLayers 
(Layer2,,show)"onmouseout="MM_showHideLayers(Layer2,,hide)"＞ 
＜TBODY＞ 
＜TR＞ 
＜TDheight=15＞ 
＜DIValign=center＞＜A 
href="F#"＞總目錄＜/A＞＜/DIV＞＜/TD＞＜/TR＞ 
＜TR＞ 
＜TDheight=15＞ 
＜DIValign=center＞＜A 
href="G#"＞圖書目錄＜/A＞＜/DIV＞＜/TD＞＜/TR＞ 
＜/TBODY＞＜/TABLE＞ 
＜/DIV＞
到這里，你就可以看到一個完整的下拉菜單的網頁特效了。