Jquery 下拉菜单，可以设置颜色，支持CSS3圆角

<SCRIPT
src="js/jquery.js"
type=text/javascript></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function(){

//


//


//Following events are applied to the slideMenu itself (moving slideMenu up and down)
$(this).parent().find("ul.slideMenu").slideDown('fast').show(); //Drop down the slideMenu on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.slideMenu").slideUp('fast'); //When the mouse hovers out of the slideMenu, move it back up
});
//
$('td.catlink').hover(function(e) {
$(this).children().filter('a.navTrigger').css(aOverStyle);
$(this).children().filter('ul.slideMenu').css('display', 'block')
},
function(e) {
$(this).children().filter('a.navTrigger').css(aLeaveStyle);
$(this).children().filter('ul.slideMenu').css('display', 'none')
});
switch (document.site) {
case 'zenith':
aOverStyle = {
'background': '#6ea2af',
'border-top': '1px solid gray',
'border-left': '1px solid gray',
'border-right': '1px solid gray',
'color': 'White'
};
aLeaveStyle = {
'background': 'transparent',
'border-top': '1px solid transparent',
'border-left': '1px solid transparent',
'border-right': '1px solid transparent',
'color': '#d1d1d2'
};
break;
case 'pinnacle':
default:
aOverStyle = {
'background': '#dae5ed',
'border-top': '1px solid gray',
'border-left': '1px solid gray',
'border-right': '1px solid gray'

};
aLeaveStyle = {
'background': 'transparent',
'border-top': 'none',
'border-left': 'none',
'border-right': 'none'
};
}


});


</SCRIPT>


<DIV id=mainWrapper>
<DIV class=navLinks id=topCatLinks style="z-index:100">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<td class="catlinkLeft catlink"><A class="navTrigger" id="triggerDigital ProductsTop" href="Digital-Products.html" name=Digital Products>Digital Products</A>
<ul class=slideMenu id=Digital ProductsTop style="DISPLAY: none">

<li><a href="Digital-Products_MP3-&-MP4-Player.html">MP3 & MP4 Player</a></li>

<li><a href="Digital-Products_USB-Flash-Drive.html">USB Flash Drive</a></li>

<li><a href="Digital-Products_USB-Gadgets.html">USB Gadgets</a></li>

<li><a href="Digital-Products_Mini-Digital-Photo-Frame.html">Mini Digital Photo Frame</a></li>

</ul>
</td>
<td class="catlinkLeft catlink"><A class="navTrigger" id="triggerSport&LeisureTop" href="Sport&Leisure.html" name=Sport&Leisure>Sport&Leisure</A>
<ul class=slideMenu id=Sport&LeisureTop style="DISPLAY: none">

</ul>
</td>
<td class="catlinkLeft catlink"><A class="navTrigger" id="triggerOffice SuppliesTop" href="Office-Supplies.html" name=Office Supplies>Office Supplies</A>
<ul class=slideMenu id=Office SuppliesTop style="DISPLAY: none">

<li><a href="Office-Supplies_Desktop-Calendars.html">Desktop Calendars</a></li>

<li><a href="Office-Supplies_Post-It-Notes.html">Post It Notes</a></li>

<li><a href="Office-Supplies_Calculators.html">Calculators</a></li>

<li><a href="Office-Supplies_Briefcases.html">Briefcases</a></li>

<li><a href="Office-Supplies_Laser-Pointers.html">Laser Pointers</a></li>

<li><a href="Office-Supplies_Paper-Clips.html">Paper Clips</a></li>

</ul>
</td>
<td class="catlinkLeft catlink"><A class="navTrigger" id="triggerComputer AccessoriesTop" href="Computer-Accessories.html" name=Computer Accessories>Computer Accessories</A>
<ul class=slideMenu id=Computer AccessoriesTop style="DISPLAY: none">

</ul>
</td>
<td class="catlinkLeft catlink"><A class="navTrigger" id="triggerCell Phone AccessoriesTop" href="Cell-Phone-Accessories.html" name=Cell Phone Accessories>Cell Phone Accessories</A>
<ul class=slideMenu id=Cell Phone AccessoriesTop style="DISPLAY: none">

</ul>
</td>
<td class="catlinkLeft catlink"><A class="navTrigger" id="triggerEco Friendly ProductsTop" href="Eco-Friendly-Products.html" name=Eco Friendly Products>Eco Friendly Products</A>
<ul class=slideMenu id=Eco Friendly ProductsTop style="DISPLAY: none">

</ul>
</td>

</TR></TBODY></TABLE></DIV>
CSS文件
http://www.corange.cn//uploadfiles/css_89516.zip

原文地址:http://www.corange.cn/archives/2010/07/3667.html