ul li下拉菜单部分位于图像后面，未均匀定位

Question

这个简单的页面给我带来了麻烦。网站结构简单：导航栏为头部，主要内容区域由大图像和两段组成;并且在底部有一个页脚 - 这就是全部。

我遇到了以下问题：

1. 该下拉菜单的一部分出现在大图片（1135x307）后面。我希望它出现在前面。

2. 导航栏项目的位置不均匀。我希望它们均匀地显示在下面的图像上方。

3. 即使主要内容区域的内容不多，页脚也需要更进一步。我不知道如何实现这一目标。

这是指向html和css代码的链接：http://jsbin.com/loponi/1/

非常感谢任何帮助！

Answer 1

JSBIN中的图片无效...

但您可以尝试将position: relative;添加到nav。 如果这没有用，请为导航设置z-index。

Answer 2

尝试在z-index上添加ul：

.topNav ul {
    display: inline-block;
    list-style: none outside none;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

<强>已更新

我不知道它是怎么回事，但试着做出这些改变：

将内容段落在div中：

<div class="contentArea">
  //  all <p class="content">
</div>  

CSS：

.contentArea { width: 1135px; min-height:500px;height:auto;}
.content {
    width:100%;
 }
.footer{    
  bottom:0;      
 }

希望这会对你有帮助..

CHECK THIS