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

基本上，因为我为了阻止从任何定位我的内容“绝对”被放错地方时使用dropout菜单，充当导航栏部分的图层黑色层最终消失。有没有办法解决这个问题，还是我需要完全重构我的网站？

这是什么看起来像在浏览器中：

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中设置高度。