Mega Drop Down Menu

JavaScript
1

Hi Guys,

I am trying to build a Mega Drop Down Menu, Now I am not sure if it is possible to just build a Mega Drop Down Menu in CSS as I have seem some examples of just normal CSS with stu Nicholls.

Here is what I have so far so any help would be much appreciated:

The HTML


<div id="navigation">
      <ul class="MenuLeft">
         <li class="MenuHome"><a href="#">Home</a></li>
         <li class="MenuNews"><a href="#">News</a>
	    <div class="MenuSub">
               <ul>
	          <li><a href="#">About</a></li>
	          <li><a href="#">About</a></li>	          
		  <li><a href="#">About</a></li>
               </ul>
            </div>
         </li>
	 <li class="MenuClub"><a href="#">Club</a>
	    <div class="MenuSub">
               <ul>
	          <li><a href="#">About</a></li>
	          <li><a href="#">About</a></li>	          
		  <li><a href="#">About</a></li>
               </ul>
            </div>
         </li>
         <li class="MenuTeams"><a href="#">Teams</a>
      	    <div class="MenuSub">
               <ul>
	          <li><a href="#">About</a></li>
	          <li><a href="#">About</a></li>	          
		  <li><a href="#">About</a></li>
               </ul>
            </div>
         </li>
	  <li class="MenuMatch"><a href="#">Match</a>
      	    <div class="MenuSub">
               <ul>
	          <li><a href="#">About</a></li>
	          <li><a href="#">About</a></li>	          
		  <li><a href="#">About</a></li>
               </ul>
            </div>
         </li>
         <li class="MenuContact"><a href="#">Contact</a></li>
      </ul>
   </div>
</div>

Here is my Stylesheet:


ul{list-style-type: none;}

#navigation {width:960px;margin:0 auto;}
.MenuLeft {float:left;position:relative;width:960px;overflow:hidden;background:#b60002;height:35px;}

.MenuLeft li{float: left;border-right: solid 1px #ca0002;height:35px;}

.MenuLeft li a{text-decoration: none;display: block;height: 35px;color: #fff;line-height: 35px;padding: 0 20px 0 19px;border-right: solid 1px #990000;font-weight: normal;} 
.MenuLeft li a:hover{background:#990000;color:#fff;}
.MenuLeft li.first{border-left: solid 1px #ca0002;}

.MenuSub{position:absolute;top:84px;background:#990000;z-index:5;border:#ca0002 solid 1px;display:none;}
.MenuClub li:hover .MenuSub {display:block;}
.MenuClub li.over .MenuSub {display:block;}
.MenuClub .MenuSub ul {float:left;width:220px;padding:10px;}
	
.MenuLeft .MenuSub li a {float:left;width:200px;min-height:16px;height:auto !important;height:16px;font-size:12px;color:#4b3900;border-bottom:#e7decf solid 1px;padding:5px 10px;white-space:normal;}
.MenuLeft .MenuSub li a.Last{border:none;}

.MenuLeft li.MenuClub a.MenuItem, li.MenuClub_over a.MenuItem{width:109px;}
	
li.MenuClub a.MenuItem:hover, li.MenuClub_over a.MenuItem{background-position:0 -51px;}

li.MenuClub .MenuSub, li.MenuClub_over .MenuSub {width:240px;left:0;}

Here is my Jquery :


jQuery(document).ready(function(){
	var userAgent = navigator.userAgent.toLowerCase();
		if(jQuery.browser.mozilla){
			jQuery(".MenuLeft li").bind("mouseover",function(){
				this.classname += "_over over";}).bind("mouseout",function(){
					this.classname = this.classname.replace("_over over", "");
			});
            	}
		else {
			jQuery(".MenuLeft li").bind("mouseenter",function() {
				this.classname += "_over over";
             		}).bind("mouseleave",function(){
				this.classname = this.classname.replace("_over over", "");
			});
		}
	return false;
});

Thanks