Fixed CSS positioning of nav menu on floating navbar - css

Question

visualisation of problem: http://tinyurl.com/q83t89y
Is there a way to have the browse button to stay on the exact location that it is now?
For example if I resize my window or zoom in / out the browse button leaves its location.
Here is the 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>

Answer 1

The problem is that ul.Nav2>li has been positioned to the right side of the browser. I think you should leave it alone and...
Create a fixed container <div> like radio bar. (Green box in the example below)
Set an invisible <div> in the center of container. (Red box)
Position the Browse menu to the centered box. (Blue box) Use margin-left to avoid overlapping the radio-bar.
Example: http://jsfiddle.net/Stocki/ZGzb6/