鼠标放上后伸展显示详细简介的排名菜单

一个鼠标放上去,显示详细内容备注的特效代码.

<style> div {font-size:12px;} ul {list-style:none;} DL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} DT { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} DD { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} .l { FLOAT: left} .r { FLOAT: right} .cf { CLEAR: both; DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; HEIGHT: 0px} .yspace { MARGIN: 10px auto 0px} .block { } .btl { DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; POSITION: relative; HEIGHT: 6px} .btr { DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; POSITION: relative; HEIGHT: 6px} .bbl { DISPLAY: block; FONT-SIZE: 1px; LINE-HEIGHT: 1px; POSITION: relative; HEIGHT: 6px} .sort1 .txt { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0.4em} .sort1 .txt ul { PADDING:0;margin:0;} .sort1 .txt LI { PADDING-RIGHT: 0px; PADDING-LEFT: 28px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #ddd 1px dashed} .sort1 .txt LI.listHeight { LINE-HEIGHT: 22px; HEIGHT: 22px} .sort1 .txt LI.more { PADDING-RIGHT: 10px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 8px; BACKGROUND: #f8f8f8; PADDING-BOTTOM: 6px; MARGIN: 0px 0px 3px; PADDING-TOP: 8px; BORDER-BOTTOM: #eee 1px solid} .sort1 .numBig { WIDTH: 20px; HEIGHT: 54px; TEXT-ALIGN: center;background:green;overflow:hidden;} .sort1 .numBig SPAN { DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 1.2em; WIDTH: 20px; COLOR: #fff; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 20px;text-align:center;margin:0;padding:0;} .sort1 .productImg { HEIGHT: 52px} .sort1 .productImg IMG { BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #ccc 1px; PADDING-TOP: 1px; BORDER-BOTTOM: #ccc 1px solid} .sort1 .productInfo H3 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 1.1em; PADDING-BOTTOM: 3px; LINE-HEIGHT: 1.1em; PADDING-TOP: 1px} .sort1 .productInfo P { COLOR: #666; LINE-HEIGHT: 1.4em} .hotShop {width:200px } .hotShop .txt { } .hotShop .txt11 { HEIGHT: 200px} .hotShop .txt .num1 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p1.gif) no-repeat 10px 5px} .hotShop .txt .num2 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p2.gif) no-repeat 10px 5px} .hotShop .txt .num3 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p3.gif) no-repeat 10px 5px} .hotShop .txt .num4 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p4.gif) no-repeat 10px 5px} .hotShop .txt .num5 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p5.gif) no-repeat 10px 5px} .hotShop .txt .num6 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p6.gif) no-repeat 10px 5px} .hotShop .txt .num7 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p7.gif) no-repeat 10px 5px} .hotShop .txt .num8 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p8.gif) no-repeat 10px 5px} .hotShop .txt .num9 { BACKGROUND: url(http://www.35.cn/indexstyle1/default/p9.gif) no-repeat 10px 5px} .hotShop .numBig { BACKGROUND: #ff7800} .hotShop .numBig SPAN { BACKGROUND: #f30} .hotShop .productImg { PADDING-LEFT: 0px} .hotShop .productInfo { PADDING-LEFT: 2px; HEIGHT: 52px} .hotShop .productInfo H3 { COLOR: #666} .hotShop .productInfo H3 A:link { COLOR: #f60; TEXT-DECORATION: underline} .hotShop .productInfo H3 A:visited { COLOR: #f60; TEXT-DECORATION: underline} .hotShop .productInfo H3 A:hover { COLOR: #000} </style> <div class="hotShop sort1 yspace" id=DivShopPaiHang_Food> <div class=txt id=DivShopPaiHang_ShowPanel style="HEIGHT: 265px"> <div class=txt11> <ul> <li class=more id=DivShopPaiHangFlag1_B1 style="DISPLAY: none"> <p class="numBig l"><span>1</span></p> <p class="productImg l"><a title=知味轩民间瓦罐湖滨南店 href="http://www.alixixi.com/" target=_blank><img id=Img_DivShopPaiHangFlag1_1 src="http://alixixi.com/skin/2008/ai.gif" height=50 alt=知味轩民间瓦罐湖滨南店 width=50></a></p> <div class=productInfo> <h3><a title=知味轩民间瓦罐湖滨南店 href="http://www.alixixi.com/" target=_blank>知味轩民间瓦罐湖滨南..</a></h3> <p>特色菜：民间老汤 木瓜雪蛤 玉米烙 铁板香菜..</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_1 style="DISPLAY: none">images/01.jpg</div> <span class=cf></span></li> <li class="num1 listHeight" id=DivShopPaiHangFlag1_S1 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','1')"><a title=知味轩民间瓦罐湖滨南店 href="http://www.alixixi.com/" target=_blank>知味轩民间瓦罐湖滨南店</a> <li class=more id=DivShopPaiHangFlag1_B2 style="DISPLAY: none"> <p class="numBig l"><span>2</span></p> <p class="productImg l"><a title=九龙塘食府 href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_2 height=50 alt=九龙塘食府 width=50></a></p> <div class=productInfo> <h3><a title=九龙塘食府 href="http://www.alixixi.com/" target=_blank>九龙塘食府</a></h3> <p>特色菜：野生海虾 土笋冻拼章鱼 花螺苦螺拼盘</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_2 style="DISPLAY: none">images/02.jpg</div> <span class=cf></span></li> <li class="num2 listHeight" id=DivShopPaiHangFlag1_S2 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','2')"><a title=九龙塘食府 href="http://www.alixixi.com/" target=_blank>九龙塘食府</a> <li class=more id=DivShopPaiHangFlag1_B3 style="DISPLAY: none"> <p class="numBig l"><span>3</span></p> <p class="productImg l"><a title=龙厨海鲜食府 href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_3 height=50 alt=龙厨海鲜食府 width=50></a></p> <div class=productInfo> <h3><a title=龙厨海鲜食府 href="http://www.alixixi.com/" target=_blank>龙厨海鲜食府</a></h3> <p>特色菜：海鲜</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_3 style="DISPLAY: none">images/03.jpg</div> <span class=cf></span></li> <li class="num3 listHeight" id=DivShopPaiHangFlag1_S3 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','3')"><a title=龙厨海鲜食府 href="http://www.alixixi.com/" target=_blank>龙厨海鲜食府</a> <li class=more id=DivShopPaiHangFlag1_B4 style="DISPLAY: none"> <p class="numBig l"><span>4</span></p> <p class="productImg l"><a title=南翔小笼[SM店] href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_4 height=50 alt=南翔小笼[SM店] width=50></a></p> <div class=productInfo> <h3><a title=南翔小笼[SM店] href="http://www.alixixi.com/" target=_blank>南翔小笼[SM店]</a></h3> <p>特色菜：小笼馒头</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_4 style="DISPLAY: none">images/04.jpg</div> <span class=cf></span></li> <li class="num4 listHeight" id=DivShopPaiHangFlag1_S4 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','4')"><a title=南翔小笼[SM店] href="http://www.alixixi.com/" target=_blank>南翔小笼[SM店]</a> <li class=more id=DivShopPaiHangFlag1_B5 style="DISPLAY: none"> <p class="numBig l"><span>5</span></p> <p class="productImg l"><a title=喜满客无烟烧烤 href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_5 height=50 alt=喜满客无烟烧烤 width=50></a></p> <div class=productInfo> <h3><a title=喜满客无烟烧烤 href="http://www.alixixi.com/" target=_blank>喜满客无烟烧烤</a></h3> <p>特色菜：秋刀鱼</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_5 style="DISPLAY: none">images/05.jpg</div> <span class=cf></span></li> <li class="num5 listHeight" id=DivShopPaiHangFlag1_S5 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','5')"><a title=喜满客无烟烧烤 href="http://www.alixixi.com/" target=_blank>喜满客无烟烧烤</a> <li class=more id=DivShopPaiHangFlag1_B6 style="DISPLAY: none"> <p class="numBig l"><span>6</span></p> <p class="productImg l"><a title=厦大蔡清洁楼(名苑)咖啡厅 href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_6 height=50 alt=厦大蔡清洁楼(名苑)咖啡厅 width=50></a></p> <div class=productInfo> <h3><a title=厦大蔡清洁楼(名苑)咖啡厅 href="http://www.alixixi.com/" target=_blank>厦大蔡清洁楼(名苑)..</a></h3> <p>特色菜：茄子牛肉饭 黑椒牛肉饭 金针姑牛肉饭..</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_6 style="DISPLAY: none">images/06.jpg</div> <span class=cf></span></li> <li class="num6 listHeight" id=DivShopPaiHangFlag1_S6 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','6')"><a title=厦大蔡清洁楼(名苑)咖啡厅 href="http://www.alixixi.com/" target=_blank>厦大蔡清洁楼(名苑)咖啡厅</a> <li class=more id=DivShopPaiHangFlag1_B7 style="DISPLAY: none"> <p class="numBig l"><span>7</span></p> <p class="productImg l"><a title=农家佬 href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_7 height=50 alt=农家佬 width=50></a></p> <div class=productInfo> <h3><a title=农家佬 href="http://www.alixixi.com/" target=_blank>农家佬</a></h3> <p>特色菜：野菜小肠汤</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_7 style="DISPLAY: none">images/07.jpg</div> <span class=cf></span></li> <li class="num7 listHeight" id=DivShopPaiHangFlag1_S7 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','7')"><a title=农家佬 href="http://www.alixixi.com/" target=_blank>农家佬</a> <li class=more id=DivShopPaiHangFlag1_B8 style="DISPLAY: none"> <p class="numBig l"><span>8</span></p> <p class="productImg l"><a title=福宁阁酒楼 href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_8 height=50 alt=福宁阁酒楼 width=50></a></p> <div class=productInfo> <h3><a title=福宁阁酒楼 href="http://www.alixixi.com/" target=_blank>福宁阁酒楼</a></h3> <p>特色菜：农家菜</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_8 style="DISPLAY: none">images/08.jpg</div> <span class=cf></span></li> <li class="num8 listHeight" id=DivShopPaiHangFlag1_S8 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','8')"><a title=福宁阁酒楼 href="http://www.alixixi.com/" target=_blank>福宁阁酒楼</a> <li class=more id=DivShopPaiHangFlag1_B9 style="DISPLAY: none"> <p class="numBig l"><span>9</span></p> <p class="productImg l"><a title=向阳坊[同安二店] href="http://www.alixixi.com/" target=_blank><img src="http://alixixi.com/skin/2008/ai.gif" id=Img_DivShopPaiHangFlag1_9 height=50 alt=向阳坊[同安二店] width=50></a></p> <div class=productInfo> <h3><a title=向阳坊[同安二店] href="http://www.alixixi.com/" target=_blank>向阳坊[同安二店]</a></h3> <p>特色菜：西式蛋糕</p> </div> <div id=ImgSrc_DivShopPaiHangFlag1_9 style="DISPLAY: none">images/09.jpg</div> <span class=cf></span></li> <li class="num9 listHeight" id=DivShopPaiHangFlag1_S9 onMouseOver="SwapPaiHangShopDiv('DivShopPaiHangFlag1','9')"><a title=向阳坊[同安二店] href="http://www.alixixi.com/" target=_blank>向阳坊[同安二店]</a> </li> </ul> </div> </div> </div> <SCRIPT type=text/javascript> _gObjByID = function(id) { return document.getElementById(id); } function ShowImg(ImgId,ImgSrc) {//alert(_gObjByID(ImgId).src); if(_gObjByID(ImgId).src=="") { _gObjByID(ImgId).src=_gObjByID(ImgSrc).innerHTML; } } function SwapPaiHangShopDiv(DivKey,ID) {//DivS1 DivB1 for(var i=1;i<=9;i++) { _gObjByID(DivKey + '_S' + i).style.display=''; _gObjByID(DivKey + '_B' + i).style.display='none'; } _gObjByID(DivKey + '_S' + ID).style.display='none'; _gObjByID(DivKey + '_B' + ID).style.display=''; ShowImg("Img_"+DivKey+"_"+ID,"ImgSrc_"+DivKey+"_"+ID); } if(9>=1){ SwapPaiHangShopDiv('DivShopPaiHangFlag1','1'); } </SCRIPT>
[提示：可先修改代码再按运行]