Menu Transition Effect with Submenu - css

Question

So I've hacked up this CSS menu tutorial and I'm almost done with customizing it, however I'm having 2 issues. Whenever I go over my "About" menu that contains two additional list links the transition works but then the content is shifted over to the left and fades out. The second is, i'm trying to have the bottom border slide up using CSS transition but it simply fades the color in. I've tried changing height, margin-bottom, bottom but no dice. I've attached the code and 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

Try adding position: relative; to #cssmenu ul li. That will fix your issue with the sub-menu floating off to the left.
As for generating the effect of the color rising from the bottom, you could create a absolutely positioned <div> inside the <li> with a starting height of 5px and increase it to cover the entire box once you hover.
EDIT
Here is an example fiddle. http://jsfiddle.net/bbZS8/
I've only incorperated the effect on the second tab, (About Us).
#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;
}
It's not perfect, but gives a good starting point to beginning tweaking.