一種新的隱藏-顯示模式誕生——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完成的比較好。