JQuery -) 超級簡單的下拉菜單

用jquery實現的一個超級簡單的下拉菜單。

效果圖

初始效果

鼠標懸浮效果

代碼



<script type="text/javascript" src="jquery-1.11.1.js"></script>


	nav a {
		text-decoration: none;
	}
	nav > ul > li {
		float: left;
		text-align: center;
		padding: 0 0.5em;
	}

	nav li ul.sub-menu {
		display: none;
		padding-left: 0 !important;
	}

	.sub-menu li {
		color: white;
	}

	.sub-menu li:hover {
		background-color: black;
	}

	.sub-menu li:hover a {
		color: white;
	}

	ul {
		list-style: none;
	}



	

<script type="text/javascript">
	$(document).ready(function() {
		$('nav li').hover(function() {
			$(this).find('.sub-menu').css('display', 'block');
		}, function() {
			$(this).find('.sub-menu').css('display', 'none');
		});
	});
</script>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *