用CSS做一个简易侧边栏

在下拉菜单的基础上进行了一点点改进，完成一个可以自动隐藏的侧边栏。
其实使用到的内容和下拉菜单一样，只是使用了“hover”伪类选择器，通过这个来实现，如果想要使用js实现只需要使用“onmouseenter”、“onmouseleave”对鼠标进行监听，如果鼠标在标签内则改变标签位置、大小同样可以实现。
都是基础内容，就不进行标注了。
本体：

<div class="outDiv">
			<div class="main" >
				<ul class="outUl">
					<li class="selectDown">
						<ul>
							<label>情丝百转</label>
							<li>绕指柔</li>
							<li>上眉梢</li>
							<li>再重头</li>
						</ul>
					</li>
					<li class="selectDown">
						<ul>
							<label >黛眉轻蹙</label>
							<li>绕指柔</li>
							<li>上眉梢</li>
							<li>再重头</li>
						</ul>
					</li>
					<li class="selectDown">
						<ul>
							<label >鱼笺尺素</label>
							<li>绕指柔</li>
							<li>上眉梢</li>
							<li>再重头</li>
						</ul>
					</li>
					<li class="selectDown">
						<ul>
							<label>夜色真美</label>
							<li>绕指柔</li>
							<li>上眉梢</li>
							<li>再重头</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

对应CSS：

<style type="text/css">
			body,html{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			.outDiv{
				width: 300px;
				height: 100%;
				background-color:  gray;
				position: fixed;
				left: -280px;
				text-align: center;
				transition: 0.6s;
			}
			.outDiv:hover{
				left: -40px;
			}
			.selectDown label{
				display: block;
				width: 200px;
				height: 40px;
				background-color: #777777;
				font-size: 15px;
				text-align: center;
				color:white;
				margin-bottom: 5px;
				margin-top: 10px;
			}
			.selectDown{
				height: 40px;
				margin-bottom: 5px;
				/* 如果内容超出范围则切断 */
				overflow: hidden;
				float: left;
				padding-right: 5px;
				/* 动画时间 */
				transition: 0.6s;
			}
			.selectDown:hover{
				height: 140px;
			}
			.selectDown ul li{
				width: 100%;
				height: 30px;
				background-color: antiquewhite;
				list-style-type: none;
			}
			.selectDown ul li:hover{
				background-color: aqua;
			}
		</style>

效果图：