导航菜单导致整个导航图层消失Html / CSS

Question

所以，我试图在我的网站上创建一个下拉菜单，但大部分内容已经成功，但我遇到了一个问题。

    <div id="nav">
        <ul>
            <li>content</li>
            <li>
                content
                <ul>
                    <li>subcontent</li>
                    <li>subcontent</li>
                    <li>subcontent</li>
                </ul>
            </li>
            <li>content</li>
            <li>content</li>
        </ul>
    </div>

以上是内容

body{
    margin: 0px;
}

ul, li{
    margin: 0px;
    padding: 0px;
}

#nav{
    width: 100%;
    background-color: #000000;
    color: #ff0000;
}

#nav ul{
    position: absolute;
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}

#nav ul li{
    min-width: 100px;
    display: inline-block;
    border: 1px solid #000000;
}

#nav ul li:hover{
    background-color: #0000ff;
}

#nav ul li ul li{
    display: none;
    margin-left: -1px;
    margin-top: -1px;
}

#nav ul li:hover ul li{
    display: block;
}

这就是CSS

基本上，因为我将我的内容定位为绝对的＆＃39;为了在使用丢失菜单时阻止任何错位，作为导航栏部分的图层黑色层最终消失。有没有办法解决这个问题，还是我需要完全重构我的网站？

这是浏览器中的样子：

Answer 1

尝试将background-color添加到ul, li

ul, li{
 margin: 0px;
 padding: 0px;
 background-color: #000;
}

或给#nav一个高度

#nav{
 width: 100%;
 background-color: #000000;
 color: #ff0000;
 height: 50px; 
}

Answer 2

没关系，我意识到这是因为我没有在#nav中设置高度。