Demo thực hành xây dựng menu dropdown Live code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title> Xây dựng dropdown menu -toidicode.com</title>
</head>
<style type="text/css" media="screen">
	ul#menu{
		list-style: none;
		position: relative;
	}
	ul li{
		display: inline-block;
		background: #e1e1e1;
		padding: 0 15px;
		border: 1px solid black;
	}
	ul li ul{
		position: absolute;
		top: 20px;
		display: none;
	}
	ul li ul li{
		display: block;
		background: #e7e7e7;
		padding: 0 10px;
	}
</style>
<body>
	<ul id='menu'>
		<li>
		Trang Chủ	
		</li>
		<li>
			Dịch vụ
			<ul>
				<li>Thiết kế</li>
				<li>Lập trình</li>
			</ul>
		</li>
		<li>
			Sản phẩm
			<ul>
				<li>Toidicode.com</li>
			</ul>
		</li>
	</ul>
	<script type="text/javascript">
		//chọn tất cả các thẻ li (con của thẻ ul có id= menu)
		var li = document.querySelectorAll('ul#menu li');
		//Duyệt tất cả các phần tử li đó
		for(i=0; i < li.length; i++){
			//và áp sự kiện click lên từng thẻ li
			li[i].addEventListener('click',function()
			{
				//chọn tất cả các thẻ ul con của thẻ li
				var ulc = document.querySelectorAll('ul#menu li ul');
				//Tiến hàn duyệt từng thẻ ul đó
				for(j=0; j< ulc.length; j++){
					//css cho display = none
					ulc[j].style.display = 'none';
				}
				//chọn thẻ ul con của thẻ li vừa click
				//this ở đây chính là đối tượng li vừa click
				var child = this.getElementsByTagName('ul');
				//nếu như có tồn tại ul con của li vừa click
				if(child.length >=1){
					//tiến hành css display=block
					child[0].style.display = 'block';
				}
			});
		}
	</script>
</body>
</html>