Html 使菜单转到页宽的末尾

所以。。。我的大脑刚刚停止工作。 我要创建的是一个菜单，它位于屏幕的末尾（无论我使用的是什么分辨率）。我对需要帮助的部分发表了评论。（第64行）

} 非常感谢您的帮助！

---

这就是我想要的。第n个子元素（3）的最后一部分的宽度是无限的。（或自动适应屏幕宽度）

您是否希望看到类似的情况

.menu > li:nth-child(3){
float:right;
position:relative;
} 

更新的JSFIDLE:

---

感谢所有参与帮助我的人

不，那不是我想要的。我希望菜单的最后一部分具有无限宽度。你能给我一个模型吗？模型：（如果菜单的边缘碰到了浏览器的边缘）。你觉得这个主意怎么样：制作一个100%宽度的新div。然后使用z-index将这个Div定位在“菜单”本身下面，这样做。无论浏览器的宽度如何，一切都“应该”正常工作？@Joel尝试一下，让我们知道

.menu > li:nth-child(3){
float:right;
position:relative;
} 

 .menu > li {
float: left;
 height: 100%;
width: 30%; 
width: calc((100% - 90px) / 5);
width: -moz-calc((100% - 90px) / 5);
width: -webkit-calc((100% - 90px) / 5);
position:relative;
 z-index:1;
}
.menu > li:nth-child(3){
margin-top:0;
width:100%;
z-index:0;
position:absolute;
height:90px;
 } 



.menu > li.home {
background: #00CCFF url(../images/home.png) center no-repeat; /* detta var 3E454D innan */
width: 90px;
}

.menu > li.current {
 background-color: #00CCFF !important; /* !important VS .menu li:hover #F2762E */
 box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;

 }