子菜單沒有出現在瀏覽器中。我相信它的東西有關的CSS定位

我想創建一個多級導航菜單與CSS。我想這很簡單，但我不知道我有什麼問題。以下是我的CSS。子菜單沒有出現在瀏覽器中。我相信它的東西有關的CSS定位

/********** General Styles **********/ 

body{ 
font-family:Arial, Tahoma, sans-serif; 
font-size:14px; 
color:#444549; 
} 

/********** Structure Styles **********/ 

div.center-container{ 
    width:980px; 
    margin:0 auto; 
    overflow:hidden; 
    position: relative; 
    background: #cbcbcb; 
} 

.empty-div{ 
height: 400px; 
} 
/********** Navigation **********/ 

#menu-container{ 
margin-top:100px; 
background:url(../img/nav_bg.png) 0 0 repeat-y; 
height:42px; 
} 

#nav{ 
float:left; 
margin:0; 
padding:0; 
margin-left: 48px; 
} 

#nav li{ 
list-style:none; 
position:relative; 
} 

#nav li a, #nav li{ 
    float: left; 
} 

#nav li a{ 
    text-decoration: none; 
    padding: 1em 1em; 
    color: #fff; 
    text-transform:capitalize; 
    border-bottom: 1px solid #cbcbcb; 
} 

#nav li a:hover{ 
    background:white; 
    color: #00c6ff; 

    /* 
    -moz-border-radius-topright: 10px; 
    -moz-border-radius-topleft: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -webkit-border-top-left-radius: 10px; 
    border-top-left-radius: 10px; 
    border-top-left-radius: 10px; 
    */ 

} 

/********** Sub-menu **********/ 
#nav li ul{ 
display:block; 
position: absolute; 
left:0; 
top:100%; 
padding:0; margin:0; 
}

這是我的HTML

<body> 
<div id="header-container"><!-- --></div> 

<!-- Navigation --> 
<div id="nav-container"> 
    <div class="center-container"> 
     <div id="menu-container"> 
      <ul id="nav"> 
       <li><a href="#">about us</a></li> 
       <li><a href="#">solutions area</a> 
        <ul> 
         <li><a href="#">sub menu example 1</a></li> 
         <li><a href="#">sub menu example 2</a></li> 
         <li><a href="#">sub menu example 3</a></li> 
         <li><a href="#">sub menu example 4</a> 
          <ul> 
           <li><a href="#">sub menu example 1</a></li> 
           <li><a href="#">sub menu example 2</a></li> 
           <li><a href="#">sub menu example 3</a></li> 
           <li><a href="#">sub menu example 4</a></li> 
           <li><a href="#">sub menu example with an extra long title 5</a></li> 
          </ul> 
         </li> 
         <li><a href="#">sub menu example with an extra long title 5</a></li> 
        </ul> 
       </li> 
       <li><a href="#">service and support</a></li> 
       <li><a href="#">industries</a></li> 
       <li><a href="#">products</a></li> 
       <li><a href="#">news &and; media</a></li> 
       <li><a href="#">contact &and; support</a></li> 
      </ul> 
     </div> <!-- end menu-container --> 
    </div> <!-- end center-container --> 
</div> <!-- end nav-container --> 

<div id="banner-container"> 
    <div class="center-container"> 
     <div class="empty-div"></div> 
    </div> <!-- end center-container --> 
</div> <!-- end banner-container --> 

<div id="footer-container"><!-- --></div>

我也有重置所有瀏覽器的CSS reset.css。問題是子菜單沒有出現，但是當我在開發人員工具中檢查它應該在哪裏（不可見）。

來源

2012-03-24 Subash

給背景顏色到您的body代替div.center-container因爲在HTML標記定義.center-container兩個時間的話，第二個重疊的第一&刪除overflow:hidden也。

這樣寫：

body{ 
background: #cbcbcb; 
}

來源

2012-03-24 12:22:45 sandeep

子菜單沒有出現在瀏覽器中。我相信它的東西有關的CSS定位

回答

相關問題