纯用CSS做一个下拉菜单（新人练手）

近期打算制作一个下拉菜单，但是再网上找的代码总有些不满意（其实是太菜了，不理解）所以自己比照代码做了一个，如果有不合理的地方，欢迎各位大佬指正。
首先制作本体部分，因为只是新手所以只用了“ul”无序表，代价是CSS中需要多设置几条。

<div >
			<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>
			.main{
				width: 400px;
				height: 100px;
				width: 1295px;
				/* 整体水平居中 */
				margin: 0 auto;
			}
			.main ul li label{
				display: block;
				width: 320px;
				height: 40px;
				background-color: #777777;
				font-size: 20px;
				text-align: center;
				color:white;
				margin-bottom: 5px;
			}
			.selectDown:hover{
				height: 180px;
				width: 320px;
			}
			.outUl{
				margin: 0;
				padding: 0;
				width: 1300px;
			}
			.main ul li ul{
				margin: 0;
				padding-left: 0;
			}
			.main ul li{
				height: 40px;
				margin-bottom: 5px;
				/* 如果内容超出范围则切断 */
				overflow: hidden;
				float: left;
				padding-right: 5px;
				/* 动画时间 */
				transition: 0.6s;
			}
			.main ul li ul li{
				background-color: antiquewhite;
				/* 内层li不浮动 */
				float: none;
				text-align: center;
			}
			.main ul li ul li:hover{
				background-color: darkgray;
			}
		</style>

最后是成果图