居中导航栏并将其置于其他元素之上

Question

我试图将此导航栏放在背景图像的中心和上方（您可能无法在jsfiddle中看到bg图像）但是它在那里。如果我给它一个绝对的位置，那么所有人都在一起。

如果有人有任何帮助，那就太棒了。我只是不知道在html中将它放在哪里以确保它在顶部。

继承人：https://jsfiddle.net/98k1nv9e/

ul{
list-style-type: none;
border: 2px solid red;
overflow: hidden;
width: 530px;
margin: 0px auto;

}

li{
width: 120px;
height: 40px;
margin: 0px 4px;
border: 2px solid white; 
float: left;

}

a{
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;

}