修复了浮动导航栏上导航菜单的 CSS 定位答案

【问题标题】：Fixed CSS positioning of nav menu on floating navbar修复了浮动导航栏上导航菜单的 CSS 定位
【发布时间】：2013-12-25 14:42:11
【问题描述】：

问题可视化：http://tinyurl.com/q83t89y

有没有办法让浏览按钮停留在现在的确切位置？例如，如果我调整窗口大小或放大/缩小浏览按钮会离开其位置。

这里是css：

 <style>
  ul.Nav2 {
  list-style-type:none;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  width:auto;
}

ul.Nav2>li {
   position:fixed;
   top:0;
   right: 25%;
   padding:0px;
   width:100px;
   height:20px;
   margin:10px;
   z-index: 9999;
   float: right;


}

ul.Nav2 li a {
  font-family:"Arial";
  font-size:15px;
  color:#FFF;
  display:block;
  width:auto;
  height:35px;
  line-height:20px;
/*removed
  text-align:center;
*/
  text-decoration:none;
  opacity:0.6;
  padding:0px 10px;
  ;
  ;
  ;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

ul.Nav2 li a:hover {
  opacity:1;
}

ul.Nav2 ul {
  list-style:none;
  position:absolute;
  left:-9999px;
  text-align:right;
  float:right
  /*added*/
  display:block;
  padding:0;
  min-width:9.3ex;
}

ul.Nav2 ul li {
  padding-top:1px;
  float:none;
}

ul.Nav2 ul a {
  white-space:nowrap;
}

ul.Nav2 li:hover ul {
  left:inherit;
}

ul.Nav2 li:hover a {
  text-decoration:none;
}

ul.Nav2 li:hover ul a {
  text-decoration:none;
}

ul.Nav2 li:hover ul li a:hover {
}
</style>

【问题讨论】：

把它放在一个小提琴......

标签： css menu navigation css-position

【解决方案1】：

问题是ul.Nav2>li 已定位到浏览器的右侧。我认为你应该不管它，然后......

创建一个固定的容器<div>，比如单选栏。（下例中的绿框）
在容器中心设置一个不可见的<div>。（红框）
将“浏览”菜单置于居中框。（蓝色框）使用margin-left 避免与单选栏重叠。

示例：http://jsfiddle.net/Stocki/ZGzb6/

【讨论】：