header 显示的 HTML 问题

Question

网址:test.getfamo.us

问题:下拉菜单不起作用(将鼠标悬停在任何链接上即可查看)，因为我有主框覆盖它。

我试图在不使用高度百分比的情况下对网站进行编码，因为我听说它很糟糕并且我的网站在其他显示器上显示效果不佳，所以我将其全部更改为 px。不管怎样，为了制作主框，我使用了这个 CSS

#content #main {
position: absolute;
top: 70px; 
bottom: 15px; 
width:100%;

所以它没有覆盖我的页眉或页脚。 问题是我的标题，这是 CSS

#content #header {
height: 70px;
width: 100%;
}

我希望它是这样的，这样它就可以在所有屏幕尺寸上工作，主框会自动生成它的尺寸，但是我显然希望我的下拉菜单可见，所以我正处于十字路口。

那么我该如何解决这个问题呢？ 此外，如果您需要更多信息，我的 CSS 可用:http://test.getfamo.us/css/

非常感谢!

Answer 1

将 z-index 添加到 ul。

ul li ul {
    box-shadow: none;
    display: none;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 48px;
    transition: opacity 0.2s ease 0s;
    visibility: hidden;
    width: 150px;
    z-index: 50;
}