css下拉菜單第二級消失

Question

我只做了一個CSS的下拉菜單。
這裏是一個例子。
http://jsfiddle.net/DEK8q/8/
現在我想居中該菜單。所以，我想補充的相對位置是這樣的：

#nav-container { 
    position: relative; 
    float: left; 
    left: 50%; 
} 

#nav { 
    ***position: relative;*** 
    float: left; 
    left: -50%; 
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif; 
    border: 1px solid #121314; 
    overflow: hidden; 
} 

我發現，如果我定位相對導航，菜單的第二級無法顯示！
這是因爲有一個相對定位的div的顯示。
我想讓它只適用於css並對齊中心。我怎麼解決這個問題？

Answer 1

我剛剛找到解決方案，使用位置靜態和餘量左而不是左。

#nav { 
    position: static; 
    float: left; 
    margin-left: -50%; 
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif; 
    border: 1px solid #121314; 
    overflow: hidden; 
} 

http://jsfiddle.net/LrmUS/1/

Answer 2

可以試試這個，以及

#nav { 
    border: 1px solid #121314; 
    font: bold 12px SimHei,Arial,Helvetica,Sans-serif; 
    margin: 0 auto; 
    overflow: hidden; 
    width: 500px; 
} 

http://jsfiddle.net/DEK8q/29/

Answer 3

可以用來傳送方式

#nav-container { 
    position: relative; 
    float: left; 
    width:100%; 
} 

#nav { 
    position: absolute; 
    left:50%; 
    margin-left:-160px; /* This is the width of your menu/2  */ 
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif; 
    border: 1px solid #121314; 
    overflow: hidden; 
} 

看一看： http://jsfiddle.net/DEK8q/8/

Answer 4

我覺得你在這裏使用很多定位。這不是必需的和位置：靜態;是位置的默認值，所以你不需要定義它。你只需要使用相對/絕對。檢查這個fiddle。你可以減少更多的定位在這個小提琴也爲另一個ul，這是懸停在第二個菜單項時顯示。

檢查小提琴並使用下面的代碼。

#nav-container { 
    float: left; 
    width:100%; 
} 
#nav { 
float: left; 
margin-left:25%; 
font: bold 12px SimHei, Arial, Helvetica, Sans-serif; 
border: 1px solid #121314; 
overflow: hidden; 
} 

Answer 5

這裏是您的解決方案：http://jsfiddle.net/DEK8q/36/

所使用的一些關鍵的CSS樣式：

#nav-container { 
    position: relative; 
    left: 50%; 
} 

#nav { 
    position:absolute; 
    left: -50%; 
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif; 
    border: 1px solid #121314; 
} 

#nav ul{ 
    list-style:none; 
} 

#nav > ul{ 
    margin:0px; 
    padding:0px; 
} 

#nav li{ 
    float:left; 
    position:relative; 
} 

#nav li ul{ 
    display:none; 
    position:absolute; 
    left:0px; 
    top:30px; 
    padding:0px; 
    margin:0px; 
} 

#nav li li ul{ 
    left:100%; 
    top:0px; 
} 


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