master

分支 (2)

管理

管理

master

dev_test

web-test
/
左侧菜单实现.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#leftMenu ul {
				width: 100px;
				position: absolute;
				background: #DADADA;
				list-style: none;
			}

			#leftMenu li {
				width: 100px;
				position: relative;
			}

			#leftMenu li>ul {
				left: 100px;
				top: 0;
				display: none;
			}

			#leftMenu li:hover>ul {
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="leftMenu">
			<ul>
				<li><a href="#">一级目录1</a>
					<ul>
						<li><a href="#">100001</a></li>
						<li><a href="#">100002</a>
							<ul>
								<li><a href="#">100021</a></li>
								<li><a href="#">100022</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">一级目录2</a>
				    <ul>
				    	<li><a href="#">300001</a></li>
				    	<li><a href="#">300002</a></li>
				    </ul>
				</li>
				<li><a href="#">一级目录3</a>
					<ul>
						<li><a href="#">300001</a></li>
						<li><a href="#">300002</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>