SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<link rel="stylesheet" href="http://unirazz.com/problems/navProb/css/common.css">
<link rel="stylesheet" href="http://unirazz.com/problems/navProb/css/en.css">
<link rel="stylesheet" href="http://unirazz.com/problems/navProb/css/temp-main-nav.css">
<script src="http://unirazz.com/problems/navProb/js/jquery.hoverIntent.minified.js"></script>
<script src="http://unirazz.com/problems/navProb/js/common-plugins.js"></script>
<div id="main-container" class="outer-container"> 
    <div class="inner-container"> 
    
        <div id="header"> 
            <div id="nav-bar"> 
                <ul class="left"> 
                    <li id="nav-bar-news"><a href="#"><span>News</span></a> 
                        <div class="nav-menu"> 
                            <a class="expand-menu" href="#"></a> 
                            <ul class="nav-menu-items" style="position: absolute;"> 
                                <li><h1><a href="#">Link One</a></h1></li> 
                                <li><h1><a href="#">Link Two</a></h1></li> 
                                <li><h1><a href="#">Link Three</a></h1></li> 
                                <li><h1><a href="#">Link Four</a></h1></li> 
                            </ul> 
                            <div class="expand-section"> 
                                Latest News<br /> 
                                <a href="#">Some sort of title</a><br /> 
                                July 23, 2310
                            </div> 
                        </div> 
                    </li> 
                    <li id="nav-bar-about"><a href="#"><span>About</span></a> 
                        <div class="nav-menu"> 
                            <a class="expand-menu" href="#"></a> 
                            <ul class="nav-menu-items"> 
                                <li><h1><a href="#">Link One</a></h1></li> 
       ...

JavaScript

$(document).ready(function() {

    var cookieName = 'expandMenu';
    var isAnimating = false;

    //create cookies for each menu with value=0 (close)
    $('#nav-bar > ul > li').each(function(i) {
        var x = readCookie(cookieName + i);
        if (x) {
            if (x == 1) {
                if (i < 3) $(this).children('.nav-menu').css({
                    width: '460px'
                }).children('.expand-section').show();
                else $(this).children('.nav-menu').css({
                    width: '460px'
                }).children('.expand-section').show();
            }
        }
        else {
            createCookie(cookieName + i, '0', 7);
        }
    });

    function outHandler() {
      $(this).children('div').slideUp();
      $(this).children('a').removeClass('current', 450);
    }

    $('#nav-bar > ul > li').hoverIntent({
        over: function() {
            $('#nav-bar > ul > li:has(div:visible)').each(function() {
              this.hoverIntent_t = clearTimeout(this.hoverIntent_t);
              this.hoverIntent_s = 0;
              outHandler.call(this);
            });
            $(this).children('div').slideDown('slow');
            $(this).children('a').addClass('current', 250);
        },
        timeout: 1000,
        out: outHandler
    });
    
    $('#nav-bar ul li a').click(function(e) {
        e.preventDefault();
    });
    $('#nav-bar ul.left .expand-menu').click(function(e) {
        var isVisible = $(this).nextAll('.expand-section:visible').size();
        e.preventDefault();
        if (isVisible == 0) {
            var $this = $(this);
            $(this).parent().animate({
                width: '460px'
            }, 500, function() {
                $this.nextAll('.expand-section').fadeIn();
            });
            var li = $(this).parent().parent().get(0);
            var ind = $('#nav-bar > ul > li').index(li);
            createCookie(cookieName + ind, '1', 7);
        }
        else {
         ...