html - ul li 下拉菜单部分位于图像后面且位置不均匀

Question

这个简单的页面让我很头疼。网站结构简单:导航栏为头部，主要内容区域由一个大图片和两个段落组成；和底部的页脚 — 仅此而已。

我遇到了以下问题:

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

2. 导航栏元素的位置不均匀。我希望它们均匀地出现在下图的顶部。

3. 即使主要内容区域中没有太多内容，页脚也需要进一步向下。我不知道如何做到这一点。

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

如有任何帮助，我们将不胜感激!

Answer 1

尝试在 ul 上添加 z-index :

.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