前段时间我一直在向大家推荐CSS3和HTML5的东西，尽管看上去很炫，但也有不少网友抱怨兼容性问题，所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件。今天先分享一款利用jQuery实现的淡入淡出下拉菜单，看上去非常简单。先看看效果图。
虽然简单，但看上去还是蛮不错的，不是吗？
我们也可以从这里看到完整的DEMO演示。
接下来我们来简单看看这款下拉菜单源代码，先从HTML代码开始：
<ul class="navigation"><li><a href="#">Main Cat 1</a></li><li><a href="#">Main Cat 2 </a><ul><li><a href="#">Sub Cat 2-1</a></li><li><a href="#">Sub Cat 2-2</a></li><li><a href="#">Sub Cat 2-3</a></li><li><a href="#">Sub Cat 2-4</a></li><li><a href="#">Sub Cat 2-5</a></li></ul><div class="clear"></div></li><li><a href="#">Main Cat 3 </a><ul><li><a href="#">Sub Cat 3-1</a></li><li><a href="#">Sub Cat 3-2</a></li><li><a href="#">Sub Cat 3-3</a></li><li><a href="#">Sub Cat 3-4</a></li><li><a href="#">Sub Cat 3-5</a></li><li><a href="#">Sub Cat 3-6</a></li><li><a href="#">Sub Cat 3-7</a></li></ul> <div class="clear"></div></li><li><a href="#">Main Cat </a></li></ul>
然后是CSS代码：
/* Giving a font-family and Size to give good look */body{font-family: Arial, Helvetica,sans-serif; font-size:15px;}/* Adjusting the margins, paddings and no list styles */.navigation {margin:0; padding:0; list-style:none;} /* Little tricking with positions */.navigation li {float:left; /* Show list items inline */width:150px; position:relative; }/* Playing with Main Categories */.navigation li a {background:#262626; color:#fff;display:block;/* Making sure a element covers whole li area */padding:8px 7px 8px 7px; text-decoration:none; /* No underline */border-top:1px solid #F2861D;text-align:center; text-transform:uppercase;}.navigation li a:hover {color:#F2861D;}/* Sub Cat Menu stuff*/.navigation ul {position:absolute; left:0; display:none; /* Hide it by default */margin:0 0 0 -1px; padding:0; list-style:none;border-bottom:3px solid #F2861D;}.navigation ul li {width:150px; float:left; border-top:none;}/* Sub Cat menu link properties */.navigation ul a {display:block; /* Making sure a element covers whole li area */height:15px;padding:8px 7px 13px 7px; color:#fff;text-decoration:none; border-top:none;border-bottom:1px dashed #6B6B6B;}.navigation ul a:hover {color:#F2861D;}
接下来是重要的jQuery代码，主要是实现下拉时淡入淡出的效果：
$(document).ready(function () { // hover property will help us set the events for mouse enter and mouse leave$('.navigation li').hover(// When mouse enters the .navigation elementfunction () {//Fade in the navigation submenu$('ul', this).fadeIn();// fadeIn will show the sub cat menu }, // When mouse leaves the .navigation elementfunction () {//Fade out the navigation submenu$('ul', this).fadeOut();// fadeOut will hide the sub cat menu});});
这里用了jQuery的fadeIn()和fadeOut()方法，熟悉jQuery的同学一定不会对它们陌生。
另外，大家可以在这里看到更多漂亮的CSS3菜单，兼容性问题大家自己取舍吧，呵呵。
最后把这款菜单的源码代码分享一下，下载地址>>
