2017-10-21 87 views
0

所以我試圖在我的網站上創建一個下拉菜單,而且大部分都是成功的,但是我遇到了一個問題。導航菜單導致整個導航層消失Html/CSS

<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菜單,充當導航欄部分的圖層黑色層最終消失。有沒有辦法解決這個問題,還是我需要完全重構我的網站?

這是什麼看起來像在瀏覽器中:

Nav Menu

回答

0

嘗試增加background-colorul, li

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

或給#nav高度

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

哦,謝謝你的回答,我只是想到了這一點,但非常感謝。 – PreciousMetal

0

沒關係,我是這是因爲我沒有在#nav中設置高度。