Question

我正在构建一个下拉导航栏，我遇到了问题。 jsfiddle

我想要实现的是当用户将鼠标悬停在菜单项上并且该项目具有子项时，导航容器高度会增加以适应其中的所有内容。我设法实现了这一点，但问题是悬停的项目宽度扩展，以便它可以适应所有内容。我该如何防止这种情况？

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

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

谢谢;）

Answer 1

喜欢

		(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>

下拉导航栏 - CSS，jQuery

1 个答案: