How to open nested menu from root level verticle menu

[neovantage]

Hi,
I have made a vertical menu using ul li & jQuery with some animate effect. Now what i want that when i mouse over to a link who have sub menu then it shows the sub menu and when mouse out it hide the sub menu of that link.

For example I have the following navigation menu
Home
About Us
->Profile
->Mission Statement
Services
Portfolio
Contact Us

When i mouse over to About us it shows me sub menu (Profile, Mission Statement)towards right. Can any one guide me how can I do this...?
Secondly when i mouse over the existing main menu i am giving it some animate effect and also try to change it's background color. It gives the animate effect but do not change the background color. Can you please also guide me in this regard as well.

Here is my Code of existing navigation

HTML

<div id="sidebar">
    <ul id="nav">
        <li><a href="#.">Home</a></li>
        <li><a href="#.">About Us</a></li>
        <li><a href="#.">Services</a></li>
        <li><a href="#.">Portfolio</a></li>
        <li><a href="#.">Contact Us</a></li>
    </ul>
</div>
 

CSS

#nav {
    margin-top: 50px;
}
#nav {
    list-style: none outside none;
    margin: 73px 0 0 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: right;
    white-space: nowrap;
    width: 275px;
    z-index: 10;
}
#nav li {
    height: 30px;
    margin-bottom: 6px;
    width: 275px;
}
#nav li a {
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.65);
    display: block;
    float: right;
    font: 14px/14px Arial,Helvetica,sans-serif;
    letter-spacing: 1px;
    padding: 8px 8px 6px 45px;
    text-decoration: none;
    width: auto;
}
 

JavaScript

$('#nav li').hover(
        function () {
            $(this).children().stop().animate(
                {paddingLeft: 230, paddingRight: 15, backgroundColor: "#e01a33"}, { queue:false, duration:1000, easing: 'swing'}
            );
        },
        function () {
            $(this).children().stop().animate(
                {paddingLeft: 45, paddingRight: 8, backgroundColor: "#e01a33"}, {queue:false, duration:600, easing: 'swing'}
            );
        }
    );
 

here is the Live demo of my work.

Kindly help me out to sort out my problem. I will be really thankful to you

[neovantage]

I have achieved it up to 90%. I used SuckerTree UL menus for this. But still i have a issue and that is When i mouse over to my nested menu link about us it apply the animate effect on li>a as well as ul (which is nested one). All I want that it apply on the li>a element only. Here is my updated Code.

HTML

<div id="sidebar">
            <div class="suckerdiv">
                <ul id="suckertree1">
                    <li><a href="#.">Home</a></li>
                    <li><a href="#.">About Us</a>
                        <ul>
                               <li><a href="#.">Profile</a></li>
                            <li><a href="#.">Mission, Vision &amp; Values</a></li>
                        </ul>
                    </li>
                    <li><a href="#.">Services</a></li>
                    <li><a href="#.">Portfolio</a></li>
                    <li><a href="#.">Contact Us</a></li>
                </ul>
            </div>
        </div>
 

CSS

#sidebar {
    background: rgba(5, 2, 0, 0.85);
    min-height: 100%;
    padding: 0;
    position: fixed;
    width: 275px;
    border-right: 5px solid #e01a33;
}
.suckerdiv {
    margin-top: 73px;
}
.suckerdiv ul{
    margin: 0;
    padding:0;
    list-style-type: none;
    width: auto;
    float: right;
}
.suckerdiv ul li{
    position: relative;
    text-align: right;
    margin-bottom: 6px;
    height: 30px;
}
/*Sub level menu items */
.suckerdiv ul li ul{
    position: absolute;
    z-index: 999;
    width: 220px; /*sub menu width*/
    top: 0;
    visibility: hidden;
    border-left: 5px solid #e01a33;
}
.suckerdiv ul li ul li{
    text-align:left;
    background: #000;
}
.suckerdiv ul li ul li a{
    background: #000;
    text-align:left;
    padding: 8px 8px 6px 10px;
    float: left;
}
/* Sub level menu links style */
.suckerdiv ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: #e8e8e8;
    text-decoration: none;
    padding: 8px 8px 6px 45px;
    background: rgba(255, 255, 255, 0.11);
    width: auto;
    float: right;
}
.suckerdiv ul li a:hover{
    *background-color: #6F2F53;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
 

JavaScript for Sucker div

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
        else //else if this is a sub level submenu (ul)
          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
        for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}
 
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
 

JavaScript for animate Effect

$(document).ready(function(){
    $('#suckertree1>li').hover(
        function () {
            $(this).children().stop().animate(
                {paddingLeft: 150, backgroundColor: "#e01a33"}, { queue:false, duration:1000, easing: 'swing'}
            );
        },
        function () {
            //$('ul#suckertree1 li ul').css("padding-left","10px");
            $(this).children().stop().animate(
                {paddingLeft: 45, backgroundColor: "#e01a33"}, {queue:false, duration:600, easing: 'swing'}
            );
        }
    );
});
 

Can some one tell me the solution.

Thanks in Advance