CSS3只有下拉菜單與轉換

Question

我想創建一個CSS3只有下拉菜單與轉換，但它不工作100％，因爲我希望它。即使將鼠標懸停在擴展下拉菜單上，我也希望下劃線懸停狀態保持不變。

這是我第一次嘗試： http://codepen.io/Winterfox/pen/wGmEbY

ul { 
    text-align: center; 
    li { 
    display:inline-block; 
    margin-right: 15px; 
    transition:all 0.3s ease-in-out; 
    &:hover { 
     .submenu { 
     height: 85px; 
     } 
    } 
    .submenu { 
     overflow:hidden; 
     position:absolute; 
     left: 0; 
     width: 100%; 
     background-color: #3862a0; 
     height: 0; 
     margin-top: 10px; 
     line-height: 40px; 
     box-sizing:border-box; 
     transition:height 0.3s ease-in-out; 
     transition-delay: 0.1s; 
     a { 
     color: #fff; 
     margin-top: 20px; 
     font-size: 16px; 
     &:hover { 
      color: #fff; 
      text-decoration:underline; 
     } 
     } 
    } 
    a { 
     color: #999; 
     display: block; 
     padding: 0 7px 0 7px; 
     margin: 0 0 0 0; 
     text-decoration: none; 
     position: relative; 
     &:hover { 
     color: #3862a0; 
     &::before { 
      visibility: visible; 
      transform: scale(1, 1); 
     } 
     } 
     &::before { 
     content: ""; 
     position: absolute; 
     width: 100%; 
     height: 3px; 
     bottom: -10px; 
     left: 0px; 
     background-color: #3862a0; 
     transition: all 0.2s ease-in-out; 
     transform: scale(0, 0); 
     visibility: hidden; 
     } 
    } 
    } 
} 

正如你可以看到懸停狀態下去除徘徊展開下拉菜單時。我試圖通過移動過渡到li元素來解決這個問題如下所示： http://codepen.io/Winterfox/pen/ZWxqvp

但後來我得到了1＃改變上懸停狀態時的位置下拉不好看它關閉時的問題再次。 2＃菜單文本的藍色下劃線現在顯示在頁面的底部。

任何建議如何解決這與CSS3只？

Answer 1

我想你的想法是朝着正確的方向，但不是應用了樣式的li你可以只移動錨li:hover塊內，如：

li { 
    ... 
    &:hover { 
     ... 
     a {   
      color: #3862a0; 
      &::before { 
       visibility: visible; 
       transform: scale(1, 1); 
      } 
     } 
    } 
} 

這裏充分代碼：http://codepen.io/anon/pen/VaxrwE