用css3制作下拉菜单

以前一直是用jquery的特效来做下拉菜单，这次想用css3来做这个效果。

首先是dom内容：

<span style="font-size:14px;"><nav>
					<ul class="menu">
						<li>
							<a href="#">系统管理</a> 
							<ul class="submenu">
								<li><a href="#">参数调整</a></li>
								<li><a href="#">需求列表</a></li>
								<li><a href="#">配案列表</a></li>
								<li><a href="#">媒合列表</a></li> 
							</ul>
						</li>
						<li><a href="#">人员管理</a></li>
						<li><a href="#">审批</a></li>
						<li><a href="#">媒合</a></li> 
						<li><a href="#">讨论</a></li>
					</ul>
				</nav></span>

可以看出上层的菜单是menu，子菜单是submenu。

下拉菜单的原理就是，先把子菜单隐藏，然后在鼠标移上父菜单的时候，显示子菜单。

我们先用css把子菜单隐藏掉：

<span style="font-size:14px;">header nav li ul.submenu{
	display:none;
}</span>

然后当鼠标移上父菜单时子菜单出现：

<span style="font-size:14px;">header nav ul.menu li:hover ul.submenu{
	display: block; 
	float:left;
}</span>

ok，粗糙但是基本实现的下来菜单

先实现下拉，然后进行修饰，逐渐美化，有想用css3的旋转特效给菜单做成旋转菜单~