Test Case Boilerplate

Fork this way...

HTML

<div id="container">
                <div id="topnav-wrapper">
                    <ul class="topnav clearfix">  
                        <li class="level-0 clearfix">  
                            <a href="#" title="Money" class="level-0">Money</a>
                            <div class="subnav">
                                <div class="subnav-header"><p>Tips, guides and tools for smart budgeting and money saving</p></div>
                                <ul>  
                                    <li>
                                        <a href="#" title="Benefits &amp; savings">Benefits &amp; savings</a>
                                        <ul>
                                            <li><p>All you need to know about child benefit, tax credits, benefit entitlements and savings.</p></li>
                                            <li><a href="#" title="Find out more"><strong>Find out more</strong></a></li>
                                        </ul>
                                    </li>  
                                    <li>
                                        <a href="#" title="Family budgeting">Family budgeting</a>
                                        <ul>
                                            <li><p>Practical tips on budgeting, cutting costs in the home and managing your finances.</p></li>
                                            <li><a href="#" title="Find out more"><strong>Find out more</strong></a></li>
                                        </ul>
                                    </li>  
                                    <li>
                                        <a href="#" title="Home &amp; bills">Home &amp; bills</a>
                                        <ul>
                                            <li><p>How to get the best deals or cut costs on your utilities, mortgage and car.</p></li>
                                            <li><a href="#" title="Find out more"><strong>Find out...

CSS

ul.topnav {  
    list-style: none;  
    padding: 0 20px;  
    margin: 0;  
    float: left;  
    width: 100%;  
    background: #222;  
    font-size: 1.2em;  
    background-image:-moz-linear-gradient(center bottom , #1A1A1A 7%, #303030 56%, #545454 90%);
    position:relative; /*--Declare X and Y axis base for sub navigation--*/  
}  
ul.topnav li.level-0 {  
    float: left;  
    margin: 0;  
    height: 36px;
    padding: 0;
    border-right: 2px dotted #bfbfbf;
}  
ul.topnav li a.level-0 {
    color:#fff;
    display: block;
    font-family: 'BureauGrotCondBold';
    font-size: 20px;
    font-weight: normal;
    padding:9px 19px 11px 17px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
} 
ul.topnav li .handle { /*--Drop down trigger styles--*/  
    background:#303030 url("http://www.myfamilyclub.co.uk/img/ui-icons_454545_256x240.png") no-repeat scroll -65px -1px;
    height:15px;
    width:15px;
    position:absolute;
    border-radius:4px;
    top:10px;
    right:2px;
}
ul.topnav li.subhover .handle{  
    background-position:0px -1px;
} 
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  

/* Sub nav custom styles  */
.subnav {  
    list-style: none;  
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
    left: 0; top: 35px;  
    background: #fff;  
    margin: 0; padding: 0;  
    display: none;  
    float: left;  
    width: 170px;  
    border: 1px solid #111; 
    width:958px;
    min-height:400px;
    height:auto !important;
    height:400px;
}
ul.topnav li:hover .subnav { /* CSS fallback */
    display:block;
}
.subnav .banner-section-footer-940{
    width:918px;
    background-position:center bottom;
    background-repeat:repeat-x;
    font-style:italic;
    font-size:85%;
}
.subnav .banner-section-footer-940 a{
    text-decoration:none;
    color:#444;
}
.subnav .banner-section-footer-940...

JavaScript

$("ul.topnav li.level-0").hover('touchstart',function (){
                    //$.data(this, 'timer', setTimeout(function() { // Create a time delay for mega menu visibility
                        $(this).children(".subnav").stop().show();
                        $(this).addClass("subhover"); //On hover over, add class "subhover"
                        $(this).find('.subnav li').first().addClass('active');
                    //}, 1000));
                },function (){
                    //clearTimeout($.data(this, 'timer'));
                    $("ul.topnav").children("li").children(".subnav").hide();
                    $(this).removeClass("subhover"); //On hover out, remove class "subhover"
                    $(this).find('.subnav li').removeClass('active');
                    $(this).children().find('#subnav-pointer').animate({
                        'top':53
                    },500);
                });

var colors = ['#4Bcbff', '#7159ba', '#ff69bf', '#ffb400', '#fc3434', '#ff6600', '#6ab53e', '#6ab53e', '#6ab53e'];
            var defaultColor = $('ul.topnav .level-0, ul.topnav .level-0 .subnav-header').eq(0).css('background-color');
            $('ul.topnav li.level-0').hover(function () {
                    var thisIndex = $(this).index();
                    $(this).css('background-color', colors[thisIndex]);
                    $(this).find('.subnav-header').css('background-color', colors[thisIndex]);
                    getMenuContent($(this));
                },
                function () {
                    $(this).css('background-color', defaultColor);
                    $(this).find('.subnav-header').css('background-color', defaultColor);
                });
            // Function for vertical arrow control   
            $('.subnav li a').addClass('level-1');
            $('.subnav li ul li a').removeClass('level-1').addClass('level-2');
            $('.subnav li .level-1').hover('touchstart', function(e) {
                var offset...