Css 下拉菜单没有'；t显示在导航栏中（一个div）

我在我的网站上添加了一个下拉菜单，但无法将其放入导航栏

这是我的代码：

我假设它会产生冲突，因为我的子菜单会越过导航栏的边缘？我怎样才能解决这个问题

干杯

---

ps：这并不是说我真的“需要”这个导航栏，我可以不用它，但我只是好奇而已

您正在浮动菜单并将导航菜单推到栏外。我建议删除

float:left

，并将

li

上的浮动替换为

display:inline块：

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

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

按如下方式修改CSS类：

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


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

这会将菜单放入名为navigation的div中

请看这里->

希望这有帮助
 嗨，阿瓦雷拉，谢谢你的反应。你不觉得Satwik的解决方案更简单，只要调整高度就行了吗？或者与您的解决方案相比，它有缺点吗？您好@user3668436，它允许您的导航栏正确地包含其子项。通过移除浮动，您不再需要为
.navigation
设置高度。如果在Satwik的解决方案中添加了另一个元素，则需要设置新的高度。vs Hi@Avarera，再次感谢。我会记下你的答案。你知道为什么我可以在代码中用这个填充物垂直居中导航：。导航{边距：20px 0px；填充：5px 0px；背景色：#efefefef；高度：70px；}我认为居中时比5px多得多？但它仍然有效…谢谢！您的浏览器将自己的样式添加到
ul
元素中。在Chrome中，它在：1em之前添加了
-webkit边距和
-webkit页边距：1em。任何额外的填充将从该位置开始应用。
.navigation {
    margin:20px 0;
    background-color: #efefef;
    border: 2px solid;
    height:70px;
}


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