html - 如何制作固定菜单栏，使其在调整浏览器窗口大小时不移动

Question

我想让我的菜单栏有一个固定的位置，以便在调整浏览器窗口大小时，菜单不会移动。我也希望它适用于所有浏览器。我浏览了一些答案，但我看到的解决方案似乎对我不起作用。

这是我的代码:

CSS

#nav ul {
    padding:0px;
    height:37px;
    position: fixed;
    top: -12px;
    left: 850px;
}

.nav li {
    margin:0px;
    list-style: none;
}

#nav li, #nav .last {
    float:left;
}

#nav a {
    text-decoration: none;
    text-transform:uppercase;
    width:auto;
    font-weight:bold;
    height:auto;
    padding: 85px 10px 5px;
    height:18px;
    color:#3a434e;
    font-size:12px;
    float:left;
}

#ie7 #nav a, #ie6 #nav a {
    font-size:9px;
    padding:11px 8px 5px;
}

#nav li:hover a, #nav .active a {
    color:#4D4D4D!important;
    background-image:url(../imgs/nav_active.gif);
    background-position:right center;

    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

#nav li:hover a {
    color:#FFF!important;
    background-color: #C1272D;  
}

HTML:

<div id="nav" class="nav">
    <ul>            
        <li class="active normal"><a href="#">Home</a></li>
        <li class="normal"><a href="#">Basket</a></li>
        <li class="normal"><a href="#">Lightbox</a></li>
        <li class="normal"><a href="#">My Account</a></li>
        <li class="normal"><a href="#">Contact us</a></li>
        <li class="normal"><a href="#">Admin</a></li>
        <li class="last"><a href="#">Logout</a></li>        
    </ul>
</div>

Answer 1

要么设置基于视口(viewport)宽度的百分比宽度。或者同时设置右值和左值。

   left: distance from left;
   right: distance from right;