menu - 修复背景图像位置上的菜单

Question

这是我的问题：

http://jsfiddle.net/Vqa7v/

body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}

#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}

nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}

nav a {
padding: 5px 7px;
color:white;
}

<div id="menu">
    <nav>
        <a href="#">HOME</a>
        <a href="#">SERVICES</a>
        <a href="#">ABOUT</a>
        <a href="#">BLOG</a>
        <a href="#">CONTACT</a>
    </nav>
</div>

起初，菜单适合背景位置，但将结果窗口缩小并缩小以查看菜单何时离开背景位置。

如何避免这种情况并将菜单修复到背景图像位置？（我想在我的网站中心的背景图片上有一个菜单）

Answer 1

在理解您要查找的内容时遇到了一些真正的麻烦，但就是这样吗？基本上它需要我做的一大堆改变nav等等。

http://jsfiddle.net/robsterlini/Vqa7v/2/

Answer 2

我自己解决了：http: //jsfiddle.net/Vqa7v/4/

.menu {
position:absolute;
top: 20px;
left:15px;
}

nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}

nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}

<nav>
       <div class="menu">
        <a href="#">HOME</a>
        <a href="#">SERVICES</a>
        <a href="#">ABOUT</a>
        <a href="#">BLOG</a>
        <a href="#">CONTACT</a>
       </div>
</nav>

缩小RESULT 窗口宽度并看到菜单固定为背景图像。