一种新的隐藏-显示模式诞生——css3的scale(0)到scale(1)

.dropdown-menu {
  background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  left: 50%;
  padding: 20px;
  position: absolute;
  text-transform: uppercase;
  top: 68px;
  transform-origin: center top 0;
  z-index: 3;
//  display: none;
  transform:scale(0);                                          //隐藏下拉菜单取代display:none;
  -webkit-transition:all .6s ease 0s;
  transition:all .6s ease 0s;
}

.nav-menu>ul>li:hover .dropdown-menu{                 //滑过li时子元素下拉菜单显示成等比1:1比例，缓动显示
  transform:scale(1);
}

.nav-menu>ul>li:hover a::before{         //滑过父元素导航项li时，下划线等比显示
//  animation:underline1 0.5s ease 0s normal forwords 1 runing ;//animation-fill-mode:forwords让动画停留在最后的状态(both参数的意思是停在最后的状态或初始状态)  后面的1是指只循环一次
//  background: #333 none repeat scroll 0 0;
//  bottom: -2px;
//  content: "";
//  height: 2px;
//  position: absolute;
  transform:scale(1);
}

注意：用css3的动画取代jquery逻辑可以完美的展现下拉菜单鼠标进出的逻辑，jquery则比较麻烦，这个逻辑css3完成的比较好。