悬停的项目宽度会扩展，使其适合内部的所有内容

Question

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 ;)

Answer 1

Like that

  (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(); }); 

  * { 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; } .shop{width:50%;float:left;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container" id="menu-container"> <ul class="main-menu clearfix"> <li class="dropdown shop"><a href="">Shop</a> <ul class="menu"> <li class="dropdown shop"><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> </div>