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

【问题标题】：css ul li nested menu with a padding. How on hoover retain width of the menu?css ul li 带有填充的嵌套菜单。胡佛如何保留菜单的宽度？
【发布时间】：2015-05-30 02:02:25
【问题描述】：

这里的例子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 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/），但在这种情况下，较长的文本是两行，一个项目可能是短文本，另一个是长文本，因此导航项目之间的空间会有所不同。所有项目之间的填充空间都是相同的）。

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

【问题讨论】：

也许是jsfiddle.net/soledar10/oo2vxf2o?
是的。 position: absolute; 悬停所必需的

标签： css

【解决方案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>

【讨论】：

【解决方案2】：

只需将绝对位置添加到 ul

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

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

【讨论】：