使菜单转到页面宽度的末尾答案

【问题标题】：Make menu go to the end of page-width使菜单转到页面宽度的末尾
【发布时间】：2014-11-17 19:38:28
【问题描述】：

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

.menu > li:nth-child(3){
width:70%;
overflow-x:hidden;
float:left;
margin-top:0;
position:relative;

} 非常感谢您的帮助！ http://puu.sh/cUlPx/90c4b578fa.png 这就是我要的。最后一节 nth-child(3) 的宽度将是无限的。（或自动适应屏幕宽度）

【问题讨论】：

标签： html css menu width

【解决方案1】：

你是否期待这样的事情

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

【讨论】：

不，这不是我想要的。我希望菜单的最后一部分具有无限宽度。例如。它总是会触摸屏幕的边缘。
你能给我一个模型吗？
模型：puu.sh/cUlPx/90c4b578fa.png（如果菜单的最边缘接触到浏览器的边缘）。
你如何看待这个想法：制作一个 100% 宽度的新 div。然后使用 z-index 将这个 Div 放在“菜单”本身的下面，这样。无论浏览器宽度如何，一切都“应该”正常工作？
@Joel 尝试一下并告诉我们

【解决方案2】：

 .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;

 }

更新的 Jsfiddle：http://jsfiddle.net/x2jsqbmf/4/

感谢所有参与帮助我的人！

【讨论】：