I think this was fullfill your requierment..
<div id="floatMenu">
<h3>Floating Menu</h3>
<ul>
<li><a href="#">Home</a>
<ul class="dropdown_menu">
<li><a href="index.html">home page one</a></li>
<li><a href="index-2.html">home page two</a></li>
<li><a href="index-3.html">home page three</a></li>
<li><a href="index-4.html">home page four</a></li>
<li><a href="index-box.html">home page five</a></li>
<li><a href="index-box-fixed.html">home page six</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li class="mega-parent"><a href="#">Elements</a>
<ul class="mgea-menu">
<li class="mega-sub"><a href="#">Column one</a>
<ul class="mega-sub-item">
<li><a href="#">Accordion</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">table</a></li>
<li><a href="#">progressbar</a></li>
<li><a href="#">Alerts</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column two</a>
<ul class="mega-sub-item">
<li><a href="#">Audio</a></li>
<li><a href="#">vido</a></li>
<li><a href="#">gallery one</a></li>
<li><a href="#">Gallery two</a></li>
<li><a href="#">typhogrpahy</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column Three</a>
<ul class="mega-sub-item">
<li><a href="#">Testimonial</a></li>
<li><a href="#">brand</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">map</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column one</a>
<ul class="mega-sub-item">
<li><a href="#">Food menu item 1</a></li>
<li><a href="#">Food menu item 2</a></li>
<li><a href="#">Contact form</a></li>
<li><a href="#">Food product</a></li>
<li><a href="#">No sticky</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">gallery</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<script language="javascript" type="text/javascript">
<!-- //
$(function () {
function moveFloatMenu() {
var menuOffset = menuYloc.top + $(this).scrollTop() + "px";
$('#floatMenu').animate({ top: menuOffset }, { duration: 500, queue: false });
}
menuYloc = $('#floatMenu').offset();
$(window).scroll(moveFloatMenu);
moveFloatMenu();
});
//-->
</script>
<style type="text/css">
#floatMenu {
position:absolute;
top:30%;
left:10px;
width:135px;
background-color:#FFF;
margin:0;
padding:0;
font-size:11px;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
#floatMenu h3 {
color:white;
font-weight:bold;
padding:3px;
margin:0;
background-color:#006;
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
font-size:13px;
text-align:center;
}
#floatMenu ul {
margin:0;
padding:0;
list-style:none;
}
#floatMenu ul li {
padding-left:10px;
background-color:#f5f5f5;
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
}
#floatMenu ul li a {
text-decoration:none;
}
</style>
