Javascript 悬停的项目宽度将扩展，以便它可以容纳其中的所有内容

我正在建立一个下拉导航栏，我有一个问题

我想要实现的是，当用户将鼠标悬停在菜单项上并且该项具有子项时，导航容器的高度将增加，以适应其中的所有内容。我设法做到了这一点，但问题是悬停项的宽度会扩大，以便它可以容纳其中的所有内容。我怎样才能防止呢

我有这个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>

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

谢谢；）

像那样

（函数（$）{
$.fn.recurse=函数（\u this，\u parent\u下拉列表）{
_父下拉菜单。每个（函数（）{
$（this）.mouseover（函数（事件）{
var_uls=$（this.children（'ul.menu'）；
_uls.每个（功能（）{
//有浮动到正确的类
if（$（this）.hasClass（'float-to-right'））{
}
});
$（this.children（'ul.menu'）.css（{display:'block'}）；
});
$（this）.mouseleave（函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
_this.children（'li'）.find（'ul.menu'）.each（函数（）{
$（this.css（{display:'none'}）；
});
});
_this.recurse（_this，_parent_dropdowns.find（'li.dropdowns'））；
});
}
$.fn.menufy=函数（）{
返回此。每个（函数（）{
var _parent _menu=$（此项）；
var\u parent\u dropdowns=\u parent\u menu.find（'li.dropdown'）；
_父菜单。递归（\u父菜单，\u父菜单下拉菜单）；
});
}
})（jQuery）；
jQuery（文档）.ready（函数（$）{
$（'.main menu'）.menufy（）；
});
*{
边际：0px；
填充：0px；
}
保险商实验室{
列表样式：无；
}
.集装箱{
边框底部：#dedede 1px实心；
}
.clearfix:在{
内容：“；
显示：块；
身高：0；
明确：两者皆有；
}
.主菜单李{
浮动：左；
最小宽度：100px；
}
.块元素李{
浮动：无；
显示：块；
}
.向右浮动{
浮动：对；
}
.主菜单{
显示：无；
}
.主菜单>ul{
位置：相对位置；
}
.shop{宽度：50%；浮动：左；}
























这就是您想要的效果吗？-@撤消技术编号。我希望级别1 ul是内联的，第二个级别垂直显示，第三个级别浮动到悬停的父项的右侧。看看我的提琴，问题是使“店铺”的宽度不变，这样“联系人”项就不会向右移动。此外，容器必须调整其高度以适应其内容物。看我小提琴的底边。无论如何，谢谢你；）使用绝对定位将“联系人”保持在同一位置，但不显示底部边框。我不知道为什么。请把你的答案放在上下文中，而不是仅仅粘贴代码。有关更多详细信息，请参阅。
(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();
    });