與子菜單的菜單過渡效果

Question

所以我已經破解了這個CSS菜單教程，我幾乎完成了自定義它，但我有兩個問題。每當我瀏覽包含兩個額外列表鏈接的「關於」菜單時，過渡都會起作用，但內容會轉移到左側並淡出。第二個是，我試圖讓底部邊框使用CSS過渡滑動，但它只是淡入淡入。我試過改變高度，邊緣底部，底部但沒有骰子。我已經把它貼的代碼和fiddle

HTML

<div id='cssmenu'> 
<ul> 
    <li><a href='#'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>About Us</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>The School</span></a> 
     </li> 
     <li class='has-sub'><a href='#'><span>Instructors</span></a> 
     </li> 

     </ul> 
    </li> 
    <li><a href='#'><span>Classes</span></a></li> 
    <li><a href='#'><span>Schedule</span></a></li> 
    <li><a href='#'><span>News</span></a></li> 
    <li><a href='#'><span>Programs</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

CSS

a { 
    -webkit-transition: all 0.2s linear 0.2s; 
    -moz-transition: all 0.2s linear 0.2s; 
    -ms-transition: all 0.2s linear 0.2s; 
    -o-transition: all 0.2s linear 0.2s; 
    transition: all 0.2s linear 0.2s;} 

#cssmenu { width: 840px; padding: 0; margin: 0; border: 0; } 
#cssmenu ul, #cssmenu li { list-style: none; margin: 0; padding: 0; } 
#cssmenu ul { position: relative; z-index: 597; } 

#cssmenu ul li { text-align:center; width: 120px; float: left; min-height: 1px; vertical-align: middle; } 
#cssmenu ul li.hover, #cssmenu ul li:hover { position: relative; z-index: 599; cursor: default; } 
#cssmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } 
#cssmenu ul ul li { float: none; width: 200px; } 
#cssmenu ul li:hover > ul { visibility: visible; } 
#cssmenu ul ul li { bottom: 100; left: 0; margin-top: 0; font-weight: normal; } 

#cssmenu a { display: block; line-height: 1em; text-decoration: none; } 

#cssmenu { background: #000; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; font-size: 12px; } 
#cssmenu > ul { *display: inline-block; } 
#cssmenu:after, #cssmenu ul:after { display: block; clear: both; } 
#cssmenu ul ul a {background: #333;color: #FFF; border: 1px solid #fff; border-top: 0 none; line-height: 150%; padding: 16px 20px; } 
#cssmenu ul ul li { position: relative; } 

#cssmenu ul ul li:nth-child(1) > a { background: #333; border-bottom: 1px solid #FFF } 
#cssmenu ul ul li:nth-child(1) > a:hover { color: #fff; background: #333} 
#cssmenu ul ul li:nth-child(2) > a { background: #333; border-bottom: 1px solid #FFF;} 
#cssmenu ul ul li:nth-child(2) > a:hover { color: #fff; background: #333; } 



#cssmenu ul li:nth-child(1) > a { border-bottom: 5px solid #fff; } 
#cssmenu ul li:nth-child(2) > a { border-bottom: 5px solid #ff6; } 
#cssmenu ul li:nth-child(3) > a { border-bottom: 5px solid #f60; } 
#cssmenu ul li:nth-child(4) > a { border-bottom: 5px solid #00f; } 
#cssmenu ul li:nth-child(5) > a { border-bottom: 5px solid #0c6; } 
#cssmenu ul li:nth-child(6) > a { border-bottom: 5px solid #63c; } 
#cssmenu ul li:nth-child(7) > a { border-bottom: 5px solid #f00; } 

#cssmenu ul li:nth-child(1) > a:hover { color: #000; background: #fff; } 
#cssmenu ul li:nth-child(2) > a:hover { color: #000; background: #ff6; } 
#cssmenu ul li:nth-child(3) > a:hover { background: #f60; } 
#cssmenu ul li:nth-child(4) > a:hover { background: #00f; } 
#cssmenu ul li:nth-child(5) > a:hover { background: #0c6; } 
#cssmenu ul li:nth-child(6) > a:hover { background: #63c; } 
#cssmenu ul li:nth-child(7) > a:hover { background: #f00; } 

#cssmenu ul ul li.has-sub > a:after      {position: absolute;top: 50%;right: 15px;margin-top: -8px; } 
#cssmenu ul li.has-sub > a:after      { margin-left: 5px; } 
#cssmenu a            { background: #000; color: #fff;padding: 0 20px; line-height: 45px; } 

Answer 1

嘗試增加position: relative;到#cssmenu ul li。這將解決您的問題，並將子菜單懸浮在左側。

至於從底部產生顏色上升的效果，您可以在<li>的內部創建一個絕對定位的<div>，起始高度爲5px，並在懸停後將其增加到覆蓋整個框。

EDIT

下面是一個例子小提琴。 http://jsfiddle.net/bbZS8/

我只在第二個選項卡（關於我們）上合併了效果。

#yellow-test 
{ 
    position: absolute; 
    bottom: -5px; 
    left: 0; 
    height: 5px; 
    width: 100%; 
    background-color: #FF6; 
    color: #FF6; 
    overflow: hidden; 
    line-height: 45px; 
    -webkit-transition: height .25s ease; 
     -moz-transition: height .25s ease; 
     -o-transition: height .25s ease; 
      transition: height .25s ease; 

} 
#cssmenu ul li:hover > div 
{ 
    height: 50px; 
    color: #000; 
} 

這並不完美，但爲開始調整提供了一個很好的起點。