由于此菜单不易灵活改动图片量又大要改栏目和增删栏目特麻烦得须改图片
因对本人对此菜单做了大量改动最终达到效果是样
原网站WebSite那个菜单加上图片有80多k呢经修改过后菜单加上图片大小只有4k左右改了过后是不是小了很多呢
改动后优点便于修改栏目名称和增删栏目图片量减少无论多少栏目只需两张图片
熟悉js人还可以把它改得更简单方便呢不过我对js还不够了解所以就等高手改更简单效果吧！
补充点: 这个效果在FF下不能实现,其它浏览器,我也没有测试,只在IE6.0下测试通过.
点击运行可以看到效果: <style type="text/css"> <!-- .menu_bg{ float:left; width:80px; height:25px; line-height:25px; background-image:url(http://www.cqgg.com/UploadFiles_15/2007-3/313929821.g<img src='/icons/13079if.gif' />); font-size:12px; color:#ccc; text-align:center; } .menu_cont{ float:left; position: absolute; visibility: visible; background-image:url(http://www.cqgg.com/UploadFiles_15/2007-3/313380944.g<img src='/icons/13079if.gif' />); color:#fff; text-align:center; width:80px; height:25px; line-height:25px; FILTER: alpha(opacity=0); cursor: po<img src='/icons/13079int.gif' />er; top:8px !important; top:15px; } } a{font-size:12px; color:#fff; text-decoration:none;} --> </style> 首页 [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]<br/> <script type="text/javascript"><!-- google_ad_client = "pub-1634561494151585"; /* 468x60, articlebottom */ google_ad_slot = "7716109916"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> <div class="tags"> 标签：<a href="/Tag/71893/Index.html">渐隐渐显特点</a> <a href="/Tag/71892/Index.html">图片的渐显播放</a> <a href="/Tag/4941/Index.html">图片渐显</a> <a href="/Tag/71891/Index.html">flash渐显</a> </div> <div id="plPdf"> <div> <a href="/mypdf/45488.pdf" title="下载 'flash渐显:一个不错的渐显菜单' 的PDF电子版" style="color: #ff6600; font-size: 14px; font-weight: bold;">下载文章的 PDF文档电子版 离线看</a></div> </div> <div class="diggdiv"> <div id="digg52777" class="diggbox"> <div class="diggnum">0</div> <div class="digglink"> <a href="javascript:dig(45488);">我顶</a> </div> </div> <div class="prevnext"> <div> <input type="hidden" id="txtArtTitle" name="txtArtTitle" value="flash渐显:一个不错的渐显菜单" /> <input type="text" id="txtArtUrl" onclick="copy(this)" style="width:300px" value="http://www.crazycoder.cn/Javascript/Article45488.html" /><input type="button" onclick="copy()" value="复制网址" /></div> </div> </div> <div class="clear"></div> </div> <div class="title-y"> <h3>相关文章</h3> </div> <div class="list-y"> <ul class="list"> <li><a href="/Security/Article3422.html" target="_blank">图片渐显:被动防御弊端渐显 可信计算技术应运而生</a></li> <li><a href="/HtmlJiaoCheng/Article19627.html" target="_blank">javascriptcss:CSS+JavaScript打造鼠标悬停图片渐显效果！</a></li> </ul> </div> <div class="title-y"> <h3>读者评论</h3> </div> <div class="list-y"> <ul class="listcmt"> </ul> </div> <div class="title-y"> <h3>发表评论</h3> </div> <form id="formCmt" method="post" onsubmit="return saveComment();"> <div class="list-y"> <ul class="list"> <li>昵称：<input type="text" id="txtUserName" name="txtUserName" /><input type="hidden" id="txtArticleID" value="45488" /></li> <li>内容：<textarea id="txtContent" name="txtContent">