Jquery菜单系统 - 显示没有顶级菜单项扩展以适合的子菜单项

Question

我设置了以下菜单系统，它非常简单但是你可以看到子菜单项比顶级项目大，所以当它们悬停时，顶层菜单会扩展以允许子菜单。

有没有办法让顶级菜单项保持固定的宽度（它们在项目的另一部分中从js给出宽度）并且无论有多大都没有展开，下面的子菜单项都显示在下面顶级项目。

当你将鼠标悬停在这些子菜单项上时，它也有一个淡入淡出状态的问题，所以看起来每个子菜单项的屏幕上都会闪烁一次。

对此的任何帮助将不胜感激。

var auth_width = $("#nav > ul:nth-child(3) > li:nth-child(2)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(2)").css("width", auth_width);
var cart_width = $("#nav > ul:nth-child(3) > li:nth-child(3)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(3)").css("width", cart_width);
var country_width = $("#nav > ul:nth-child(3) > li:nth-child(4)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(4)").css("width", country_width);

$("#nav > ul > li").unbind("mouseover").bind("mouseover", function(){
	$(this).find("ul").fadeIn();
});
$("#nav > ul > li").unbind("mouseout").bind("mouseout", function(){
	$(this).find("ul").fadeOut();
});

#nav{
float:right;
}

#nav > ul > li {
	display:inline-block;
	list-style:none;
    vertical-align:top;
}

#nav > ul > li > ul{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul>
	<li>
		Item 1
	</li>
	<li>
		Item 2
		<ul>
			<li>Sub Item 1</li>
			<li>Sub Item 2</li>
		</ul>
	</li>
	<li>
		Item 3
		<ul>
			<li>Sub Item 1</li>
			<li>Sub Item 2</li>
		</ul>
	</li>
	<li>
		Item 4
		<ul>
			<li>Sub Item 1</li>
		</ul>
	</li>
</ul>
</div>

// ------------------ EDIT ------------------ \

我刚刚添加了一节，以显示顶级菜单项实际上是在脚本的另一部分设置了宽度。

我需要这些宽度保持不变，并且整个元素要正确浮动

Answer 1

我通常对导航栏元素使用修复width属性。大多数情况下，由于菜单链接和子链接不经常更改（主要是......），这已足够了：

＆＃13;

＆＃13;

$("#nav > ul > li").unbind("mouseover").bind("mouseover", function(){
	$(this).find("ul").fadeIn();
});
$("#nav > ul > li").unbind("mouseout").bind("mouseout", function(){
	$(this).find("ul").fadeOut();
});

＆＃13;

#nav{
float:right;
}

#nav > ul > li {
	display:inline-block;
	list-style:none;
  vertical-align:top;
    margin: 0;
    padding: 0;
    width: 80px;
}

#nav > ul > li > ul{
	display:none;
    margin: 0;
    padding: 0;
	list-style:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul>
	<li>
		Item 1
	</li>
	<li>
		Item 2
		<ul>
			<li>Sub Item 1</li>
			<li>Sub Item 2</li>
		</ul>
	</li>
	<li>
		Item 3
		<ul>
			<li>Sub Item 1</li>
			<li>Sub Item 2</li>
		</ul>
	</li>
	<li>
		Item 4
		<ul>
			<li>Sub Item 1</li>
		</ul>
	</li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Doug还说使用.movie-timing { display:none; } .movie-timing.show { display:block; } 来解决这个问题：

$('.screening-days li').click(function(){
   $('.screening-days li').removeClass('active');
   $(this).addClass('active');

   var dataClass = $(this).data('class');
   $( '.movie-timing' ).removeClass('show');
   $( '.movie-timing.'+dataClass ).addClass('show');
});

示例：

position:absolute

#nav > ul > li > ul{
  display:none;
  position:absolute;
  width:100%;
}

var auth_width = $("#nav > ul:nth-child(3) > li:nth-child(2)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(2)").css("width", auth_width);
var cart_width = $("#nav > ul:nth-child(3) > li:nth-child(3)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(3)").css("width", cart_width);
var country_width = $("#nav > ul:nth-child(3) > li:nth-child(4)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(4)").css("width", country_width);

$("#nav > ul > li").unbind("mouseover").bind("mouseover", function(){
	$(this).find("ul").fadeIn();
});
$("#nav > ul > li").unbind("mouseout").bind("mouseout", function(){
	$(this).find("ul").fadeOut();
});

Answer 3

您可以给出子菜单position: absolute - 这将使子菜单存在于自己的空间中，而不会与其父元素冲突。但是，当菜单向右浮动时，您需要考虑到这一点（使用负左边距margin-left: -25px;和/或设置子菜单的默认宽度）。

＆＃13;

＆＃13;

var auth_width = $("#nav > ul:nth-child(3) > li:nth-child(2)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(2)").css("width", auth_width);
var cart_width = $("#nav > ul:nth-child(3) > li:nth-child(3)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(3)").css("width", cart_width);
var country_width = $("#nav > ul:nth-child(3) > li:nth-child(4)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(4)").css("width", country_width);

$("#nav > ul > li").unbind("mouseover").bind("mouseover", function(){
	$(this).find("ul").fadeIn();
});
$("#nav > ul > li").unbind("mouseout").bind("mouseout", function(){
	$(this).find("ul").fadeOut();
});

＆＃13;

#nav{
float:right;
}

#nav > ul > li {
	display:inline-block;
	list-style:none;
    vertical-align:top;
}

#nav > ul > li > ul{
	display:none;
    position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul>
	<li>
		Item 1
	</li>
	<li>
		Item 2
		<ul>
			<li>Sub Item 1</li>
			<li>Sub Item 2</li>
		</ul>
	</li>
	<li>
		Item 3
		<ul>
			<li>Sub Item 1</li>
			<li>Sub Item 2</li>
		</ul>
	</li>
	<li>
		Item 4
		<ul>
			<li>Sub Item 1</li>
		</ul>
	</li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;