简洁的js+css三级竖向导航菜单

<style>
<pre id="css" title="css部分">
#menuList {
	margin: 0px;
	padding: 10px 0px 10px 15px;
	border: 1px solid #CCC;
	width: 203px;
	background-color: #EEE;
	color: #000;
	font-family: verdana, helvetica, arial, sans-serif;
}

li.menubar {
	font-size: 12px;
	line-height: 1.8em;
	list-style: none;
}

.menu, .submenu {
	display: none;
	margin-left: 15px;
	padding: 0px;
}

.menu li, .submenu li {
	list-style: none;
}

#menuList a {
	background-color: transparent;
	color: #000;
	font-size: 12px;
	margin-left: 15px;
	text-decoration: none;
}

#menuList a:hover {
	text-decoration: underline;
}
</style>
<script>
if (!document.getElementById) {
	document.getElementById = function() { return null; }
}
function initializeMenu(menuId, actuatorId) {
	var menu = document.getElementById(menuId);
	var actuator = document.getElementById(actuatorId);
	if (menu == null || actuator == null) return;
	actuator.onclick = function() {
		var display = menu.style.display;
		menu.style.display = (display == "block") ? "none" : "block";
		return false;
	}
}
window.onload = function() {
	initializeMenu("productsMenu", "productsActuator");
	initializeMenu("newPhonesMenu", "newPhonesActuator");
	initializeMenu("compareMenu", "compareActuator");
}
</script>
<ul id="menuList">
	<li class="menubar">
		<a href="#" id="productsActuator" class="actuator">我的收藏夹</a>

		<ul id="productsMenu" class="menu">
		<li>
			<a href="#" id="newPhonesActuator" class="actuator">个人网站</a>
			<ul id="newPhonesMenu" class="submenu">
				<li><a href="http://www.butong.net/">网页代码库</a></li>
				<li><a href="http://www.w3cn.org/">网页设计师</a></li>
				<li><a href="http://www.junchenwu.com/">JunChen博客</a></li>
				<li><a href="http://www.andymao.com/andy/">毅博客</a></li>
			</ul>
		</li>
			<li>
			<a href="#" id="compareActuator" class="actuator">国外网站</a>
			<ul id="compareMenu" class="submenu">
				<li><a href="http://www.alistapart.com/">A List Apart</a></li>
				<li><a href="http://www.csszengarden.com/">CSS禅意花园</a></li>
				<li><a href="http://www.456bereastreet.com/">456 Berea Street</a></li>
				<li><a href="http://www.w3.org/">W3C网站</a></li>
			</ul>
		</li>
		</ul>
	</li>
</ul></pre>
运行代码复制代码
javascript 特效

csS特效

使用方法＆效果

代码
