下滑菜單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.survivalescaperooms.com</title>	<script src="http://www.survivalescaperooms.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 id="iwvjtn8m0"    class="item">武林網	<ol>		<li>1111</li>		<li>2222</li>		<li>3333</li>	</ol></li>	<li id="iwvjtn8m0"    class="item">源碼下載	<ol>		<li>444444</li>		<li>555555</li>		<li>66666</li>		<li>777777</li>	</ol></li>	<li id="iwvjtn8m0"    class="item">網頁特效	<ol>		<li>88888</li>		<li>999999</li>		<li>1</li>1111	</ol></li></ol></body></html>

上一篇：展開合攏的jQuery折疊菜單，手風琴面板

下一篇：CSS菜單（很大氣）