呵呵，下面，我給大家介紹壹些網站的常用菜單。
第壹個:模仿網易的滑動門導航菜單。
& lthtml xmlns = " "/& gt；
& ltMeta ) -隨機旋轉paipai.com首頁產品圖片的效果
body {font-size:12px}
img {border:0px}
# sale { right:206 px；top:0；寬度:260px背景:#fff}
# sale title { text-align:right；墊頂:5px填充-右:5px寬度:255px高度:20px背景:URL(" images/sale title . gif ")no-repeat }
#銷售清單{margin-top:5px}
#銷售清單。sale two { height:108 px；背景:url("images/salelineH.gif ")底部重復-x；}
# sale list a { display:block；身高:108 px；寬度:86px文本對齊:居中；浮動:左；溢出:隱藏}
# saleList a . saleitem { background:URL(" images/salelinev . gif ")right repeat-y；}
#saleList a img{margin:5px 0}
# sale list a:hover { background-color:# ebff C5 }
& lt/style & gt；
& ltscript type = " text/JavaScript " & gt；
rnd . today = new Date()；
rnd . seed = rnd . today . gettime()；
函數rnd(){
rnd . seed =(rnd . seed * 9301+49297)% 233280；
返回rnd . seed/(233280.0)；
}
函數rand(數字){
return math . ceil(rnd()* number)-1；
}
函數nextSale(訂單){
if(order = = " up ")saleNum-；
else salenum++；
if(saleNum & gt；2) saleNum=0
else if(saleNum & lt；0)saleNum = 2；
//alert(saleNum)；
for(I = 0；我& lt3;i++)
document . getelementbyid(" sale list "+I). style . display = " none "；
document . getelementbyid(" saleList "+saleNum). style . display = " "；
}
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv id = " sale " class = " absolute overflow " >
& ltdiv id = " sale title " class = " absolute " >
& lta href = " JavaScript:next sale(' up ')" title = "單擊上壹個屏幕" >
& ltimg src = " images/sale fore . gif " hspace = " 4 " onmouseover = " this . src = ' images/sale fore over . gif ' " " onmouseout = " this . src = ' images/sale fore . gif ' "/& gt；& lt/a & gt；& lta href = " JavaScript:next sale(' down ')" title = "單擊進入下壹個屏幕" > & ltimg src = " images/sale next . gif " onmouseover = " this . src = ' images/sale next over . gif ' " " onmouseout = " this . src = ' images/sale next . gif ' "/& gt；& lt/a & gt；& lt/div & gt；
& ltdiv class = " overflow " style = " height:330 px " id = " sale list " >。
& ltscript type = " text/JavaScript " & gt；var salen um = rand(3)；& lt/script & gt；
& ltdiv id = " sale list 0 " style = " display:none " & gt；
& ltdiv class="saleTwo " >
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "聖誕浪漫飾品超級促銷" src = "/js images/upload files _ 3321/200804/20080423085515804 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
聖誕浪漫飾品
超級大推力
& lt/a & gt；
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "相機組裝號給妳新的感覺" src = "/js images/upload files _ 3321/20080423085516472 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
攝像機組件號
給妳壹種全新的感覺
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "增強韓國娃娃的好感度" src = "/js images/upload files _ 3321/2008042308551665438 . jpg " width = " 65 " height = " 65 "/& gt；/div & gt；
& ltdiv & gt
商譽的改善
韓國娃娃裝
& lt/a & gt；& lt/div & gt；
& ltdiv class="saleTwo " >
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "復古牛仔外套特價119元起" src = "/js images/upload files _ 3321/20080423085516293 . jpg " width = " 65 " height = "。& lt/div & gt；
& ltdiv & gt
復古牛仔外套
人民幣119元起的特別優惠
& lt/a & gt；
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "聖誕節特價運動裝七折優惠" src = "/js images/upload files _ 3321/20080423085516802 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
聖誕拍拍特價
運動服七折優惠
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "相機組裝號給妳新的感覺" src = "/js images/upload files _ 3321/20080423085516472 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
攝像機組件號
給妳壹種全新的感覺
& lt/a & gt；& lt/div & gt；
& ltdiv & gt
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "聖誕節拍電腦周邊打六折" src = "/js images/upload files _ 3321/20080423085516530 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
聖誕拍拍特價
電腦四折優惠
& lt/a & gt；
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt = "為聚會打扮出甜美的腮紅" src = "/js images/upload files _ 3321/20080423085516658 . jpg " width = " 65 " width = " 65 " height = " 65 "/& lt；/div & gt；
& ltdiv & gt
派對裝扮
甜蜜的臉紅
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "提升韓國娃娃的好感度" src = "/js images/upload files _ 3321/2008042308551665438 . jpg " width = " 65 " height = " 65 "/& gt；/div & gt；
& ltdiv & gt
商譽的改善
韓國娃娃裝
& lt/a & gt；& lt/div & gt；
& lt/div & gt；
& ltdiv id = " sale list 1 " style = " display:none " & gt；
& ltdiv class="saleTwo " >
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "新奇好玩便宜都在網遊頻道" src = "/js images/upload files _ 3321/2008042308551612 . jpg " width = " 65 " height = " 65 "/& & lt；/div & gt；
& ltdiv & gt
新奇好玩又便宜
全在網遊渠道
& lt/a & gt；
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "展現騎士馬靴的高貴氣質" src = "/js images/upload files _ 3321/200804/20080423085516202 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
展現高貴氣質
騎士穿馬靴
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "相機組裝號給妳新的感覺" src = "/js images/upload files _ 3321/20080423085516472 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
攝像機組件號
給妳壹種全新的感覺
& lt/a & gt；& lt/div & gt；
& ltdiv class="saleTwo " >
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "永不過時的條紋毛衣" src = "/js images/upload files _ 3321/200804/20080423085516984 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
永不過時
條紋毛衣
& lt/a & gt；
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "聖誕節特價運動鞋八折優惠" src = "/js images/upload files _ 3321/20080423085516651 . jpg " width = " 65 " height = " 65 "/& & lt；/div & gt；
& ltdiv & gt
聖誕拍拍特價
運動鞋打八折
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "提升韓國娃娃的好感度" src = "/js images/upload files _ 3321/2008042308551665438 . jpg " width = " 65 " height = " 65 "/& gt；/div & gt；
& ltdiv & gt
商譽的改善
韓國娃娃裝
& lt/a & gt；& lt/div & gt；
& ltdiv & gt
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "簡化唯美索尼愛立信K630 " src = "/js images/upload files _ 3321/20080423085516302 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
簡化唯美主義
索尼愛立信K630
& lt/a & gt；
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "原裝瑞士軍刀精選" src = "/js images/upload files _ 3321/20080423085516549 . jpg " width = " 65 " width = " 65 " height = " 65 "/& & lt；/div & gt；
& ltdiv & gt
原裝瑞士軍刀
挑選
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "超薄機身索尼愛立信W880 " src = "/js images/upload files _ 3321/20080423085516711 . jpg " width = " 65 " height = "。& lt/div & gt；
& ltdiv & gt
超薄機身。
索尼愛立信w880
& lt/a & gt；& lt/div & gt；
& lt/div & gt；
& ltdiv id = " sale list 2 " style = " display:none " & gt；
& ltdiv class="saleTwo " >
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "口味不同的秋冬飲食計劃" src = "/js images/upload files _ 3321/200804/20080423085516704 . jpg &；type=3" width="65" height="65" />& lt/div & gt；
& ltdiv & gt
有自己的品味
秋冬飲食計劃
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "提升韓國娃娃的好感度" src = "/js images/upload files _ 3321/2008042308551665438 . jpg " width = " 65 " height = " 65 "/& gt；/div & gt；
& ltdiv & gt
商譽的改善
韓國娃娃裝
& lt/a & gt；& lt/div & gt；
& ltdiv class="saleTwo " >
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "聖誕拍拍便攜觀影五折" src = "/js images/upload files _ 3321/20080423085516375 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
聖誕拍拍特價
便攜式音頻和視頻50%折扣
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "超薄機身索尼愛立信W880 " src = "/js images/upload files _ 3321/20080423085516711 . jpg " width = " 65 " height = "。& lt/div & gt；
& ltdiv & gt
超薄機身。
索尼愛立信w880
& lt/a & gt；& lt/div & gt；
& ltdiv & gt
& lta class = " sale item " href = " " target = " _ blank " >
& ltdiv & gt
& ltImg alt= "我愛我家家居購物" src = "/js images/upload files _ 3321/20080423085516954 . jpg " width = " 65 " height = " 65 "/> & lt；/div & gt；
& ltdiv & gt
我愛我的家庭
家庭購買
& lt/a & gt；& lta href="" target="_blank " >
& ltdiv & gt
& ltImg alt= "超值彩妝套裝變身派對女王" src = "/js images/upload files _ 3321/20080423085516919 . jpg " width = " 65 " width = " 65 " height = "。& lt/div & gt；
& ltdiv & gt
超值化妝套裝
變成派對女王。
& lt/a & gt；& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& lt/div & gt；
& ltscript type = " text/JavaScript " & gt；document . getelementbyid(" saleList "+saleNum). style . display = " "；& lt/script & gt；
& ltp & gt& lt/p & gt；
& ltp & gt更多網頁特效代碼可在
& lt/body & gt；
& lt/html & gt；
這個仿拍基本就是把圖片放在二樓，但是效果還是可以的。如果妳不喜歡我，我還有以下。慢慢學，總會懂的(Css是最重要的)
這主要是為了隱藏圖層。我覺得這個在圖層的使用上還是不錯的。
總的來說，我覺得妳有必要看看代碼中各層之間的交互！
以上是我介紹的配額菜單。雖然它的功能不是很強大，但它非常有用，在J2EE就是這樣使用的。
菜單基本上是個假象，都是用圖層和Css之間的特效做出來的！
學會圖層的具體應用後，相信妳也可以有自己的菜單了。
那我祝妳好運！！加油！！