下滑菜单CSS+Js，jQuery1.3.2代码

2024-09-05 12:20:53

字体：大中小

来源：转载

供稿：网友

下滑菜单CSS+Js，jQuery1.3.2代码，鼠标放上就会往下拉出来，在网上经常见到的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"><head>	<title>下滑菜单-www.vevb.com</title>	<script src="http://www.vevb.com/ajaxjs/jquery1.3.2.js"></script>	<script>	$(document).ready(function(){		$("li.item > ol").hide();		$("li.item").hover(function(){			$("ol",this).slideDown("fast");//$("ol",this): 寻找this中的ol.		},function(){			$("ol",this).slideUp("fast");		});	});	</script>	<style>	body { font-family: Arial; font-size: 16px; }	ol { list-style: none; margin: 0; padding: 0; }	li.item { float: left; width: 150px; background: #F39; margin: 5px; }	li.item a { font-size: 18px; color: #FFF; margin: 4px; }	li.item ol { background: #FFF; margin: 3px; }	li.item ol a { font-size: 16px; color: #000; margin: 0; }	</style></head><body><ol class="menu">	<li class="item">武林网	<ol>		<li>1111</li>		<li>2222</li>		<li>3333</li>	</ol></li>	<li class="item">源码下载	<ol>		<li>444444</li>		<li>555555</li>		<li>66666</li>		<li>777777</li>	</ol></li>	<li class="item">网页特效	<ol>		<li>88888</li>		<li>999999</li>		<li>1</li>1111	</ol></li></ol></body></html>

上一篇：展开合拢的jQuery折叠菜单，手风琴面板

下一篇：CSS菜单（很大气）