Mega Menu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/2013.03.11/hoverintent.min.js"></script>
      <div class="menu-wrap">
         <ul class="mega-menu">
            <li><a href="#">Category1</a>
                <div class="sub-container">
                   <ul class="sub">
                       <li><a href="#">Sub Category1</a></li>
                       
                       <ul class="sub">
                         <li><a href="#">Sub Category sdsd</a></li>
                         <ul class="sub">
                           <li><a href="#">Sub Category fddf dfd</a></li>
                            <li><a href="#">Sub Categorydfd fdf dfdf</a></li>
                       </ul>  
                          <li><a href="#">Sub Category rwewe</a></li>
                     </ul>  
                        <li><a href="#">Sub Category2</a></li>
                   </ul>  
                </div>
             </li>
             <li><a href="#">Category2</a></li>
            <li><a href="#">Category3</a></li>
         </ul>
      </div>

CSS

.menu-wrap {
   width:160px;
}
.mega-menu {
    background-color: #FAFAFA;
    border-width: 1px 1px 0px 1px;
    border-style: solid solid none solid;
    border-color: #909090 #909090  -moz-use-text-color #909090;
    padding:0px;
    margin:0px
}
ul.mega-menu li a {
    padding: 7px 38px 6px 15px;
    border-bottom: 1px solid #CCCCCC;
    box-shadow: 0 2px 5px -2px #FFFFFF;
    color: #222222;
    display: block;
    float: none;
    text-decoration: none;
    text-shadow: 1px 1px 1px #FFFFFF;
}
ul li {
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    display: block;
    float: none;
    font-size: 13px;
    font-weight: bold;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
ul li .sub-container {
    border: 1px solid #BBBBBB;
    position: absolute;
}
ul li .sub-container {
    border: 1px solid #BBBBBB;
    position: absolute;
    display:none;
}

JavaScript

var config = {
    interval: 100, 
    over: megaOver, 
    timeout: 0, 
    out: megaOut 
};
$('li',$('.mega-menu')).hoverIntent(config);

function megaOver(){
    var megaWidth = jQuery('.mega-menu').width();
	var direction = 'right';
	var effect = 'show';    
    $(this).addClass('mega-hover');
    var $link = $('> a',this);
    var $subNav = $('.sub',this);
    var $container = $('.sub-container',this);
    var width = $container.width();
    var outerHeight = $container.outerHeight();
    var height = $container.height();
    var itemHeight = $(this).outerHeight(true);
    var offset = $link.offset();
    var scrollTop = $(window).scrollTop();
    var offset = offset.top - scrollTop
    var bodyHeight = $(window).height();
    var maxHeight = bodyHeight - offset;
    var xsHeight = maxHeight - outerHeight;
    
    if(xsHeight < 0){
        var containerMargin = xsHeight - itemHeight;
        $container.css({marginTop: containerMargin+'px'});
    }
    
    var containerPosition = {right: megaWidth};
    if(direction == 'right'){
        containerPosition = {left: megaWidth};
    }
    
    if(effect == 'fade'){
        $container.css(containerPosition).fadeIn(defaults.speed);
    }
    if(effect == 'show'){
        $container.css(containerPosition).show();
    }
    if(effect == 'slide'){
        $container.css({
            width: 0,
            height: 0,
            opacity: 0});
        
        if(defaults.direction == 'right'){
            
            $container.show().css({
                left: megaWidth
            });
        } else {
            
            $container.show().css({
                right: megaWidth
            });
        }
        $container.animate({
            width: width,
            height: height,
            opacity: 1
        }, defaults.speed);
    }
}
		
function megaOut(){
    $(this).removeClass('mega-hover');
    var $container = $('.sub-container',this);
    $container.hide();
}