可调整大小的导航栏

Question

我对 html + css 很陌生。我目前正在尝试制作一个网站导航栏。我已经让它显示并且按钮可以在一定程度上工作，现在我唯一的问题是我希望图像可以随着浏览器窗口重新调整大小。

我使用了一种技术，它有一张图像，上面有普通的导航栏，鼠标悬停在下面的导航栏按钮上，所以通常图像显示上半部分，但当将鼠标悬停在它上面时，它会显示下半部分的某个部分。 在我使用的编码中，引用每个按钮的位置和大小以及显示多少都是特定于像素的。

我希望这个导航栏能在一定程度上根据浏览器调整大小。因此，如果显示在较小的窗口中，图像将重新调整大小，反之亦然。我尝试将 px 更改为 %，但无济于事。有没有简单的方法解决这个问题？

您可以在此处查看完整的网站：www.step-down.co.uk

ul#navbar li a {
display: block; float: left; height: 104px;
background-image: url(li1.png); text-indent: -9999px; position:relative; top:50px; right:10px;

}

ul#navbar li a.news {
    width: 172px; background-position: 0px 0;
}

ul#navbar li a.newr {
    width: 338px; background-position: -172px 0;
}
ul#navbar li a.hype {
    width: 170px; background-position: -510px 0;
}

ul#navbar li a.reviews {
    width: 205px; background-position: -680px 0; 
}
ul#navbar li a.bands {
    width: 195px; background-position: -885px 0;
}



ul#navbar li a.contact {
    width: 214px; background-position: -1080px 0;
}




    ul#navbar li a.news:hover {
    background-position: 0px -114px;
}

    ul#navbar li a.newr:hover {
    background-position: -172px -114px;
}
    ul#navbar li a.hype:hover {
    background-position: -510px -114px;
}

    ul#navbar li a.reviews:hover {
    background-position: -680px -114px;
}
    ul#navbar li a.bands:hover {
    background-position: -885px -114px;
}
    ul#navbar li a.contact:hover {
    background-position: -1080px -114px
}

Answer 1

对于所有导航栏属性，将它们设置为整个屏幕的“%”，这样它们将根据您的需要调整大小。