我想让我的菜单栏有一个固定的位置,以便在调整浏览器窗口大小时,菜单不会移动。我也希望它适用于所有浏览器。我已经做了一些答案浏览,但是我看到的解决方案似乎对我不起作用。
这是我的代码:
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>