Hovered item width expands so that it can fit all the content inside

I'm building a drop down navigation bar and i have a problem. jsfiddle

What I want to achieve is that when the user mouses over a menu item and that item has children items, the navigation container height increases to fit all the content inside it. I managed to achieve that, but the problem is that the hovered item width expands so that it can fit all the content inside. How can I prevent that?

I have this HTML:

<div class="container" id="menu-container">
<ul class="main-menu clearfix">
    <li class="dropdown"><a href="">Shop</a>
        <ul class="menu">
            <li class="dropdown float-child-to-right"><a href="">Filter by</a>
                <ul class="menu float-to-right">
                    <li class="dropdown"><a href="">Products</a>
                        <ul class="menu block-element">
                            <li><a href="">Guestbooks</a></li>
                            <li><a href="">Notebooks</a></li>
                        </ul>
                    </li>
                    <li class="dropdown block-element"><a href="">Collections</a>
                        <ul class="menu">
                            <li><a href="">Handle it</a></li>
                            <li><a href="">Tuff Love</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contacts</a></li>
</ul>
<div class="clear"></div>

CSS:

 * {
    margin: 0px;
    padding: 0px;
 }

 ul {
    list-style: none;
 }
.container {
    border-bottom: #dedede 1px solid;
}
.clearfix:after { 
   content: "";
   display: block; 
   height: 0; 
  clear: both;
}

 .main-menu li {

     float: left;
     min-width: 100px;

 }

.block-element li {
     float: none;
     display: block;
}

.float-to-right {
    float: right;
}

.main-menu li ul {
     /*display: none;*/
}

 .main-menu > ul {
     position: relative;
 }

and JS:

(function($){ 

        $.fn.recurse = function (_this,  _parent_dropdowns ) {


            _parent_dropdowns.each(function () {

                $(this).mouseover(function ( event ) {                  

                    var _uls = $(this).children('ul.menu');

                    _uls.each( function () {

                        //has float-to-right class
                        if ($(this).hasClass('float-to-right')) {

                        }

                    });

                    $(this).children('ul.menu').css({ display: 'block' });

                });

                $(this).mouseleave( function ( event ) {

                    event.preventDefault();
                    event.stopPropagation();

                    _this.children('li').find('ul.menu').each( function () {
                        $(this).css({ display: 'none' });
                    });


                });



                _this.recurse(_this, _parent_dropdowns.find('li.dropdowns'))
            });

        }

        $.fn.menufy = function () {

            return this.each(function () {

                var _parent_menu = $(this);

                var _parent_dropdowns = _parent_menu.find('li.dropdown');

                _parent_menu.recurse(_parent_menu, _parent_dropdowns);


            });

        }

    })(jQuery);

    jQuery(document).ready(function ($) {
        $('.main-menu').menufy();
    });

Thanks ;)