ashleywebdesign

In the example on jsfiddle putting the margin-top:-55px; on the nav ul li:Hover > ul will do it.
<nav> <ul> <li>Main 1 <ul> <li>Sub 1</li> <li>Sub 2</li> </ul> </li> </ul> </nav> and
nav ul { margin:0; padding:0; } nav li { list-style-type:none; display:block; width:150px; height:60px; text-align:center; line-height:55px; font-size:17px; font-family:Arial, Helvetica, sans-serif; } nav a { text-decoration:none; color:#000; } nav li:Hover { background-color:#CCC; } nav ul ul { display:none; } nav ul ul li{ background:red; } nav ul li:Hover > ul{ display:block; margin-left:150px; margin-top:-55px; }

To simply put you in the right direction, here is one of many guides: http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery
 
If you want to Google it, search for something like "Back to top button" "jQuery back to top" etc.