前几天，要实现一个导航栏插件，其实就是几行代码的事。作为程序员，都有一个特色，就是懒，有时候也觉得别人实现的效果可能好一些。知道网上有很多jquery插件，所以baidu了一番，找了个效果还不错的jquery.megamenu，相信有很多朋友用过了。贴个图看看哈：
使用起来也很简单的，引入了脚本和样式后，加上这个就ok了：
<script type="text/javascript">
jQuery(function() {
jQuery(".megamenu").megamenu();
});
</script>
用着觉得效果不是很好，但是还是凑合。本来就没多大兴趣，打算就这样了，最多也就是改改样式吧。简单地改了下，就交给了用户。可是，这回又遇到了万恶的IE6，用户都是用的IE6内核的浏览器，样式不兼容。本来那插件的样式就写得很乱，改来改去真是麻烦。看来都是懒惰惹的祸。
一番悲剧之后，决定自己写一个，但处于不想多写代码的缘故，把以前文件里面的代码和样式全部删了，重新开始写，其实一下就写好了，以后还是自己多动脑，懂手吧，下面是效果和代码：
Js代码（jquery.megamenu.js）：
$(function() {
$(".megamenu li").hover(
function() {
$(".mega-content").fadeOut();
var offset = $(".title-link").eq($(".megamenu li").index(this)).offset();
var mega = $(".mega-content").eq($(".megamenu li").index(this));
mega.css("top", offset.top + 25).css("left", offset.left - 15).width($(this).width());
if(mega.html()!="")
mega.fadeIn();
},
function() { $(".mega-content").fadeOut(); }
);
$(".mega-title").hover(
function() {
$(".mega-title").css("background-color", "#e8e7e7");
$(this).css("background-color", "#d4d4d4");
},
function() { $(".mega-title").css("background-color", "#e8e7e7"); }
);
})
样式代码（jquery.megamenu.css）：
.megamenu
{
}
.megamenu li
{
list-style:none;
float:left;
min-width:60px;
overflow:auto;
height:35px;
font-size:14px;
font-family:Verdana,"宋体",Helvetica,sans-serif;
line-height:35px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
.megamenu li a
{
}
.mega-content
{
position:absolute;
z-index:10;
display:none;
background-color:#e8e7e7;
min-width:150px;
}
.mega-title
{
font-size:12px;
min-width:150px;
_width:150px;
line-height:25px;
text-indent:20;
text-align:left;
border-bottom:solid 1px #fff;
word-spacing:0;
cursor:pointer;
}
.mega-title a
{
margin-left:15px;
}
页面代码示例
<div class="head-menu">
<ul class="megamenu">
<li>
<a class="title-link" href="javascript:void(0)">About Us</a>
<div class="mega-content">
<div class="mega-title">
<a href="ReadChapter.aspx?Location=en_US&id=NgA=">About Tuhan</a>
</div>
<div class="mega-title">
<a href="ReadChapter.aspx?Location=en_US&id=NwA=">Contact US</a>
</div>
<div class="mega-title">
<a href="ReadChapter.aspx?Location=en_US&id=OAA=">The Quality of TUHAN</a>
</div>
</div>
</li>
</ul>
</div>