css - 即使没有空间，我怎样才能防止我的 li 出现在我的菜单下方？

Question

我已经创建了一个菜单但无法解决这个问题所以我希望有人能帮助我:(

问题 我菜单中的最后一个 li( anchor 标记)一直在我的菜单下方折叠，无论我做什么，问题仍然存在。在 Firefox 中看起来不错，但在所有其他浏览器中它是一场灾难......

我已经尝试过:添加 overflow:hidden;在我的 menuwrapper 中，尝试在最后一个 ul 标签后添加一个“清除两个”div，添加 display:inline-block 到 li 标签，以及许多其他解决我的问题的方法，但没有任何效果:(
我没有设置我的 anchor 标记的显式宽度(我真的不想那样做!)。
在 Firefox 中看起来很完美:
http://robertpeic.com/kyani/template/menu.png
在其他浏览器中看起来像这样:(请注意没有蓝色按钮，因为它位于我的菜单下方)
http://robertpeic.com/kyani/template/menu2.png
我不想要这个:
http://robertpeic.com/kyani/template/menu3.png

问题:即使没有空间，如何防止我的 li 位于菜单下方？
感谢您的帮助!!

Link to my menu

相关的 CSS 看起来像这样:

.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}

.mainmenu ul{
list-style-type:none;
}

.mainmenu ul li {
float:left;
}

.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}

.mainmenu ul li a:hover{
color:#ffffff;
}

.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}

HTML 看起来像:

<div class="mainmenu">
<ul>
<li><a href="#">Početna</a></li>
<li><a href="#">Ky&auml;ni</a></li>
<li><a href="#">Trokut zdravlja</a></li>
<li><a href="#">Poslovna prilika</a></li>
<li><a href="#">Info predavanja</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div><!--/mainmenu-->

Answer 1

我将 overflow:hidden 添加到 .mainmenu 并更改了 .mainmenu ul li a 的填充，它对我有用。

.mainmenu
overflow:hidden;

.mainmenu ul li a
padding:0 22px 0 23px;

我发现获得具有跨浏览器兼容性的一致的全宽菜单栏的最佳方法是强制 LI 的宽度。尽管它不是非常向前兼容。这是我发现的保持视觉设计完整性的最佳方法。