下拉菜單不顯示在導航欄（div）

-1

我添加了一個下拉菜單到我的網站，但無法將其導入到我的導航欄中。下拉菜單不顯示在導航欄（div）

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

body { 
    font-family: Arial, Verdana, sans-serif; 
    background: #99CCFF; 
} 

/* website layout */ 

.container { 
    width: 960px; 
    margin: 0 auto; 
} 

.navigation { 
    margin-top: 20px; 
    margin-bottom: 20px; 
    padding: 10px; 
    background-color: #efefef; 
    border: 2px solid; 
} 

.main-wrap { 
    display: table; 
    width: 1000px; /* Container width + 2 x 20px */ 
    border-spacing: 20px 0; 
    margin-left: -20px; /* to adjust centering because of increased width (needed for border spacing) */ 
    margin-bottom: 20px; 
} 

.main1 { 
    display: table-cell; 
    width: 652px; 
    padding: 10px; 
    background-color: #efefef; 
    border: 2px solid; 
} 

.main2 { 
    display: table-cell; 
    width: 288px; 
    padding: 10px; 
    background-color: #efefef; 
    border: 2px solid; 
} 

footer { 
    padding: 10px; 
    background-color: #efefef; 
    border: 2px solid; 
    text-align: center; 
} 

/* dropdown menu css */ 

#nav{ 
    list-style:none; 
    font-weight:bold; 
    margin-bottom:10px; 
    float:left; 
    width:100%; 
} 

#nav li{ 
    float:left; 
    margin-right:10px; 
    position:relative; 
} 

#nav li ul{ 
    margin: 0; 
    padding-left: 0; 
} 

#nav a{ 
    display:block; 
    padding:5px; 
    color:#fff; 
    background:#333; 
    text-decoration:none; 
} 
#nav a:hover{ 
    color:#fff; 
    background:#6b0c36; 
    text-decoration:underline; 
} 

#nav ul{ 
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
} 
#nav ul li{ 
    padding-top:1px; 
    float:none; 
} 
#nav ul a{ 
    white-space:nowrap; 
} 
#nav li:hover ul{ 
    left:0; 
} 
#nav li:hover a{ 
    background:#6b0c36; 
    text-decoration:underline; 
} 
#nav li:hover ul a{ 
    text-decoration:none; 
} 
#nav li:hover ul li a:hover{ 
    background:#222; 
} 

/* links make-up */ 

a:link { 
    color: black; 
    text-decoration: none; 
} 

a:visited { 
    color:black; 
} 

a:hover { 
    color: #229944; 
    text-decoration: underline; 
} 

a:active { 
    color:red; 
} 

#externallink { 
    text-decoration: underline; 
} 

/* other */ 

img { 
    padding: 10px; 
}

我認爲它會產生衝突，因爲我的子菜單會去在導航欄的邊緣？我怎樣才能解決這個問題？

乾杯！

ps：這不是我真的「需要」這個導航欄，我可以沒有，但我只是好奇！

來源

2014-06-10 bgrt

您正在浮動菜單並將導航菜單推至酒吧外。我建議你用display:inline-block;消除float:left和更換你的LI的彩車：

#nav li { 
display: inline-block; 
margin-right: 10px; 
position: relative; 
} 

#nav { 
list-style: none; 
font-weight: bold; 
margin-bottom: 10px; 
width: 100%; 
}

Updated Fiddle

來源

2014-06-10 20:45:19

嗨avalera，感謝您的反應。難道你不說薩蒂維克的解決方法是簡單的調整高度？還是與您的解決方案相比有缺點？ – bgrt

Hi @ user3668436，它允許您的導航欄正確地包含其子項。通過刪除浮動，您不再需要爲'.navigation'設置高度。如果您在Satwik的解決方案中添加了另一個元素，則需要設置新的高度。 [他]（http://jsfiddle.net/L38cx/2/）vs [Mine]（http://jsfiddle.net/dLyWs/2/） –

嗨@avalera，再次感謝。我會標記你的答案。你知道我爲什麼可以用我的代碼中的這個填充來垂直居中：導航。 \t padding：5px 0px; \t background-color：#efefef; \t height：70px; } 我認爲這是一個比5px更多的中心？然而，它的工作... – bgrt

修改你的CSS類，如下所示：

.navigation { 
    margin:20px 0; 
    background-color: #efefef; 
    border: 2px solid; 
    height:70px; 
} 


#nav { 
    list-style:none; 
    font-weight:bold; 
    float:left; 
    width:100%; 
}

這使你的菜單稱爲DIV中導航。

看到這個在這裏 - >http://jsfiddle.net/L38cx/1/

希望這有助於！

來源

2014-06-10 20:47:36

下拉菜單不顯示在導航欄（div）

回答

相關問題