I have been trying this for almost 3 weeks now but haven't succeeded yet. I need help in tweaking a bit my drop down menu. I will try my best to make you understand what I'm looking for. 

I have a horizontal menu on my blog and the second and third level elements drop down. Is there any way by which I can make the last element and its level elements to drop up instead of dropping down? I mean, look at the fourth category on my menu - CURRENT AFFAIRS. On mouse-hover, its second element is SPORTS. 
Again on mouse hover over SPORTS, cricket, tennis, badminton etc float to the right and drop down. 
What I wish for is to keep SPORTS at the bottom of CURRENT AFFAIRS list(and not second on the list), and its elements - Cricket, tennis, badminton etc to first float right (as they currently do) but then to drop up, instead of dropping down. 

An example of what I'm trying to achieve is this one - <http://www.cssplay.co.uk/menus/final_pullup.html>
When we hover over DEMOS, then on ACTIVE FOCUS, the elements flyout to right and then drop up. I am wishing for the same. 
I do not intend to have an entirely drop-up menu, instead I want only the last, bottom element in the list to fly out to right and then its level elements to drop up, like it happens with ACTIVE FOCUS elements.
Can someone guide me how to achieve that?

This is the current CSS of the menu -

```css
/* Horizontal Menu */
#menutop ul,#menutop li,#menutop span,#menutop a {margin:0;padding:0;
position:relative;}
#menutop {height:49px;background:#1a1b1f;width:auto;position: relative;}
#menutop:after,#menutop ul:after {content:&#39;&#39;;display:block;clear:both;}
#menutop a {background:#1a1b1f;color:#e0d4d4;display:inline-block;font-family:&#39;Oswald&#39;;font-size:15px;font-weight:300;line-height:49px;padding:0 20px;text-decoration:none;transition:all 0.3s ease;}
#menutop ul {list-style:none;}
#menutop > ul,#menutop > ul > li {float:left;}
#menutop > ul > li > a {color:#e0d4d4;font-size:15px;}
#menutop > ul > li.active > a {background:1a1b1f;color:#e0d4d4;}
#menutop > ul > li:hover > a {background:#2f82c3;color:#fff;}
#menutop .menu-sub {z-index:1;}
#menutop .menu-sub:hover > ul {display:block;}
#menutop .menu-sub ul {display:none;position:absolute;width:170px;top:100%;left:0;box-shadow:0 1px 3px 0 rgba(0,0,0,0.3);border-radius:2px;}
#menutop .menu-sub ul li {margin-bottom:0px;}
#menutop .menu-sub ul li a {background:#236ea8;font-size:15px;display:block;line-height:120%;padding:10px;color:#f6f6f6;transition:all 0.3s ease;}
#menutop .menu-sub ul li:hover a {background:#459bb6;color:#fff;}
#menutop .menu-sub .menu-sub:hover > ul {display:block;}
#menutop .menu-sub .menu-sub ul {display:none;position:absolute;left:100%;top:0;}
#menutop .menu-sub .menu-sub ul li a {background:#459bb6;color:#fff;transition:all 0.8s ease-in-out;}
#menutop .menu-sub .menu-sub ul li a:hover {background:#3d8ba4;color:#fff;}
```