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

Question

此处示例 http://jsfiddle.net/v8yhk7Lr/

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 Two long text 和 Option Three 保持在同一位置(或者 Option One 的宽度与鼠标悬停之前的宽度相同)。

可以像一样设置宽度。mnav-ul-li { float: left;显示: block ；宽度:150px； }(此处为示例 http://jsfiddle.net/v8yhk7Lr/1/ )但在这种情况下，较长的文本分为 2 行，一个元素可能是短文本，另一个是长文本，因此导航元素之间的空间会有所不同。所有元素之间的填充空间都是相同的)。

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

Answer 1

.mnav-ul-li:hover > 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>