Thanks a lot Chris.

One more problem...

Now I would like to replace this menu with another side menu that I had downloaded earlier, for a website that I am designing. Now that I know jQuery, I would like to add my menu.

But, when I replace the CSS and jQuery for this new menu (HTML is the same), the side nav menu gets distorted, takes up about 60% of width and the main content div gets pushed downward.

How the old menu looks like: https://docs.google.com/file/d/0B-mhigcuV7cUaWtNYmxUUnFMakE/edit

How its actually looking: https://docs.google.com/file/d/0B-mhigcuV7cUMm1MSVNsT0xMdDA/edit

How it flickers when I hover on the first link: https://docs.google.com/file/d/0B-mhigcuV7cUYkJIX2R4RG9FYk0/edit

Thanks
MH

old html

<section class="sidenav">
	<ul class="menu">
		<li><a href="auto-curr.php">Automobile Engineering Curriculum</a>
			<ul>
				<li><a href="be-auto-curr.php">B.E. Automobile Engineering</a></li>
			</ul>
		</li>
		<li><a href="#">Computer Engineering Curriculum</a>
			<ul>
			        <li><a href="be-comp-curr.php">B.E. Computer Engineering</a></li>
				<li><a href="me-comp-curr.php">M.E. Computer Engineering</a></li>
			</ul>
		</li>
        </ul>
</sidenav>
.
.
.
.
. so on for other branches

old css:

.sidenav {
	display:block;
	position: relative;
	margin:0;
	padding:0;
	float: left;
	width:15%;
	height:auto;
	min-height:700px;
	margin-left:10%;
}


.menu {
	margin-top:40px;	
	list-style: none;
	width: 80%;
	position: relative;
	top:0px;
	left: 0px;
	padding: 0px 0 50px 0;
	font-size:12px;
	z-index:10;
}

li {
	margin: 5px 0 0 0;
}

.menu li a {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out; 
	-ms-transition: opacity 0.3s ease-out;		/*IE10*/
	
	background:#cbcbcb;
	color: #000;
	border:1px solid #a9a9a9;
	border-left:none;
	padding: 7px 15px 7px 15px;

	width: 80%;
	display: block;
	text-decoration: none;
	font-weight:bold;

}

.menu li a:hover {
	color: #000;
	padding: 7px 15px 7px 30px;
}

.menu ul li a{
	margin-left:5px;
}

.menu ul{
	list-style: none;
	font-size:11px;
	width:100%;
	margin-left:10%;
}

.menu ul li a {
	background:#ebebeb;
}

.hidden {display:none;}

old js is different, here it is:

var toggleMenu = {
	init : function(sContainerClass, sHiddenClass) {
		if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
		var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
		var arrSubMenus, oSubMenu, oLink;
		for (var i = 0; i < arrMenus.length; i++) {
			arrSubMenus = arrMenus[i].getElementsByTagName('ul');
			for (var j = 0; j < arrSubMenus.length; j++) {
				oSubMenu = arrSubMenus[j];
				oLink = oSubMenu.parentNode.getElementsByTagName('a')[0];
				oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
				this.toggle(oSubMenu, sHiddenClass);
			}
		}
	},
	toggle : function(el, sHiddenClass) {
		var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
		el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
	},

	addEvent : function(obj, type, fn) {
		if (obj.addEventListener)
			obj.addEventListener(type, fn, false);
		else if (obj.attachEvent) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() {obj["e"+type+fn](window.event);}
			obj.attachEvent("on"+type, obj[type+fn]);
		}
	},

	getElementsByClassName : function(oElm, strTagName, strClassName){
	    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
	    var arrReturnElements = new Array();
	    strClassName = strClassName.replace(/\-/g, "\\-");
	    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	    var oElement;
	    for(var i=0; i<arrElements.length; i++){
	        oElement = arrElements[i];      
	        if(oRegExp.test(oElement.className)){
	            arrReturnElements.push(oElement);
	        }   
	    }
	    return (arrReturnElements)
	}
};
toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});