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