01/10/2018, 13:55

Tại sao mục con lại hiển thị ngang

Mọi người cho mình hỏi là tại sao cái menu con trong mục C-Sharp lại hiển thị ngang vậy ?
Đây là hình ảnh chạy bằng google :

Còn đây là code HTML :

<!DOCTYPE html>
<html lang="vi">
<head>
	<title>Thanh chọn</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			font-family: Arial, sans-serif;
		}
		#menu ul{
			overflow: hidden;
			list-style-type: none;
			background-color: #ff3838;
			text-align: center;
		}
		#menu ul li {
			color: white;
			display: inline-table;
			width: 130px;
			height: 40px;
			line-height: 40px; 
		}
		#menu ul li a {
			color: white;
			text-decoration: none;
			display: block;
		}
		#menu ul li a:hover{
			color: #ff3838;
			background-color: white;
		}
		#menu ul li > .csharp {
			display: none;
		}
		#menu ul li:hover > .csharp {
			display: block;
			position: absolute;
		}

	</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li>
				<a href="#">C-Sharp</a>
				<ul class="csharp">
					<li><a href="#">Winform</a></li>
					<li><a href="#">Console</a></li>
					<li><a href="#">Graph</a></li>
				</ul>
			</li>
			<li><a href="#">Java</a></li>
			<li><a href="#">Pascal</a></li>
			<li><a href="#">C++</a></li>
			<li><a href="#">HTML</a></li>
		</ul>
	</div>
</body>
</html>