responsive_multi_menu

HTML

<div class="container">        
<a class="toggleMenu" href="#">Menu</a>
            <ul class="menu">
                <li class="first activeSelected"><a href="#">Menu 0</a></li>
                <li><a href="#">Menu 0</a></li>
                <li><a href="#">Menu 0</a>        
                    <ul class="level1">
                        <li class="first"><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 1</a></li>
                        <li class="last"><a href="#">Menu 1</a>
                            <ul class="level2">
                                <li class="first"><a href="#">Menu 2</a>        
                                    <ul class="level3">
                                        <li class="first"><a href="#">Menu 3</a></li>
                                        <li><a href="#">Menu 3</a></li>
                                        <li><a href="#">Menu 3</a>        
                                            <ul class="level4">
                                                <li class="first"><a href="#">Menu 4</a></li>
                                                <li><a href="#">Menu 4</a></li>
                                                <li class="last"><a href="#">Menu 4</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Menu 3</a></li>
                                        <li class="last"><a href="#">Menu 3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Menu 2</a></li>
                                <li class="last"><a href="#">Menu 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menu 0</a></li>
                <li class="last"><a href="#">Menu 0</a></li>
            </ul> 
</div>

CSS

a {text-decoration: none;}
ul, li, a  {margin: 0; padding: 0;}

.toggleMenu {
    display: none;
    background: #111;
    padding: 10px 15px;
    color: #fff;
}
.menu {
    list-style: none;
    *zoom: 1;
    background:#111;
}
.menu:before,
.menu:after {
    content: " "; 
    display: table; 
}
.menu:after {
    clear: both;
}
.menu ul {
    list-style: none;
    width: 9em;
}
.menu a {
    padding: 10px 15px;
    color:#fff;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
    border-top: 1px solid #000;
}
.menu > li > .parent {
    background-image: url("http://mike.php5.sk/public/menu/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.menu > li > a {
    display: block;
}
.menu li  ul {
    position: absolute;
    left: -9999px;
}
.menu > li.hover > ul {
    left: 0;
}
.menu li li.hover > ul {
    left: 100%;
    top: 0;
}
.menu li li a {
    display: block;
    background: #222;
    position: relative;
    z-index:100;
    border-top: 1px solid #111;
}
.menu li li li a {
    background:#333;
    border-top: 1px solid #222;
}
.menu li li li li a {
    background:#444;
    border-top: 1px solid #333;
}
.menu li li li li li a {
    background:#555;
    border-top: 1px solid #444;
}

@media screen and (max-width: 480px) {
    .active {
        display: block;
    }
    .menu > li {
        float: none;
    }
    .menu > li > .parent {
        background-position: 95% 50%;
    }
    .menu li li .parent {
        background-image: url("http://mike.php5.sk/public/menu/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .menu ul {
        display: block;
        width: 100%;
    }
    .menu > li.hover > ul , .menu li li.hover > ul {
        position: static;
    }

}

JavaScript

var ww = document.body.clientWidth;

$(document).ready(function() {
	$(".menu li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".menu").toggle();
	});
	adjustMenu();
})

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

var adjustMenu = function() {
	if (ww < 480) {
		$(".toggleMenu").css("display", "inline-block");
		if (!$(".toggleMenu").hasClass("active")) {
			$(".menu").hide();
		} else {
			$(".menu").show();
		}
		$(".menu li").unbind('mouseenter mouseleave');
		$(".menu li a.parent").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	} 
	else if (ww >= 480) {
		$(".toggleMenu").css("display", "none");
		$(".menu").show();
		$(".menu li").removeClass("hover");
		$(".menu li a").unbind('click');
		$(".menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		 	// must be attached to li so that mouseleave is not triggered when hover over submenu
		 	$(this).toggleClass('hover');
		});
	}
}




    $(".menu li").on('mouseenter mouseleave', function (e) {

        var elm = $('ul:first', this);
        var off = elm .offset();
        var l = off.left;
        var w = elm.width();
        var docH = $(".container").height();
        var docW = $(".container").width();

        var isEntirelyVisible = (l+ w <= docW);
                 
        if ( ! isEntirelyVisible ) {
            $(this).addClass('edge');
        } else {
            $(this).removeClass('edge');
        }
    });