下拉菜单不显示在导航栏（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）

回答

相关问题