Question

html

<div class="navig_div" id="mainnavig_div" >
<ul class="mnav-ul">

<li class="mnav-ul-li"><a href="#">Option One</a>
<ul class="mnav-ul-ul">
<li><a href="#">Option One 1</a> </li>
<li><a href="#">Option One 1 longer</a> </li>
</ul>
</li>   

<li class="mnav-ul-li"><a href="#gg">Option Two long text</a>
<ul class="mnav-ul-ul">
<li><a href="#">Option Two 1</a> </li>
<li><a href="#">Option Two 1 longer</a> </li>
</ul>
</li>

<li class="mnav-ul-li"><a href="#">Option Three</a>
<ul class="mnav-ul-ul">
<li><a href="#">Option Three 1</a> </li>
<li><a href="#">Option Three 1 longer</a> </li>
</ul>
</li>   

</ul>

</div>

CSS

.mnav-ul-li { float: left; display: block;   }
.mnav-ul-li a { display:inline-block; padding:10px 25px; }
.mnav-ul-ul { display: none; }
.mnav-ul-li:hover > ul { display: block; }

鼠标悬停在Option One上，请参阅嵌套菜单。但Option Two long text和Option Three向右移动。我希望Option Two long text和Option Three保持在同一位置（或Option One具有与鼠标悬停前相同的宽度）。

可以设置宽度，如.mnav-ul-li { float: left; display: block; width:150px; }（此处为http://jsfiddle.net/v8yhk7Lr/1/示例），但在这种情况下，较长的文字为2行，一个项目可能为短文本，另一个长文本，因此导航项目之间的空格将为与众不同。填充空间在所有项目之间都是相同的。）

如何在悬停时保持宽度（在悬停时保持与悬停前相同的宽度）？

Answer 1

只需将位置绝对添加到ul

即可

.mnav-ul-li:hover > ul { 
  display: block; 
  position:absolute;
}

http://jsfiddle.net/v8yhk7Lr/3/

Answer 2

.mnav-ul-li：hover＆gt; ul - 添加position: absolute;

.mnav-ul-li { float: left; display: block;  position: relative; }
.mnav-ul-li a { display:inline-block; padding:10px 25px; }

.mnav-ul-ul { display: none; }

.mnav-ul-li:hover > ul { display: block; position: absolute; top: 30px; left: 0; }

<div class="navig_div" id="mainnavig_div" >
<ul class="mnav-ul">

<li class="mnav-ul-li"><a href="#">Option One</a>
	<ul class="mnav-ul-ul">
	<li><a href="#">Option One 1</a> </li>
	<li><a href="#">Option One 1 longer</a> </li>
	</ul>
</li>	

<li class="mnav-ul-li"><a href="#gg">Option Two long text</a>
	<ul class="mnav-ul-ul">
	<li><a href="#">Option Two 1</a> </li>
	<li><a href="#">Option Two 1 longer</a> </li>
	</ul>
</li>

<li class="mnav-ul-li"><a href="#">Option Three</a>
	<ul class="mnav-ul-ul">
	<li><a href="#">Option Three 1</a> </li>
	<li><a href="#">Option Three 1 longer</a> </li>
	</ul>
</li>	

</ul>

</div>

css ul li嵌套菜单，带填充。胡佛如何保留菜单的宽度？

2 个答案: