After following a CSS menu tutorial and customizing it, two issues have arisen. When hovering over the "About" menu with additional list links, the transition works but then the content shifts to the left and fades out. The second issue is related to trying to make the bottom border slide up using CSS transition, which currently only results in fading the color in. I've experimented with height, margin-bottom, bottom properties, but none have been successful so far. The code and fiddle can be found below:
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: grey; }
#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: white;padding: 0 20px; line--height: 45px; }