html - 导航菜单导致整个导航层消失 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

基本上，因为我将我的内容定位为“绝对”以防止在使用下拉菜单时放错任何内容，所以充当导航栏部分的黑色图层最终消失了。有什么办法解决这个问题，还是我需要完全重组我的网站？

这是在浏览器中的样子:

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; 
}