CSS过渡（垂直层叠菜单）

Question

我想替换我personal web site中的字母菜单（左手边）很长一段时间。我去寻找一个体面的手风琴风格菜单，发现this one看起来很容易实现并做我想做的事。
改变了一些东西，使菜单本身看起来like this 好的，到目前为止一切顺利。直到我尝试将其放入我现有的开发web pages，它基本上只与'独立'菜单相似。
我在CSS中寻找冲突 - 但不擅长它，我找不到。你们中的任何一位大师都可以为我提供一些指示 我很抱歉包含这些链接，但我认为这是展示正在发生的事情的最佳方式 我看到其他人使用了相同的基本菜单，却找不到类似于我所看到的东西 //人 （编辑这个删除两个单词 - 语法！）

Answer 1

您的菜单嵌入在：

中

<div id="container">
    <div class="menu-item" id="menu-item-4">
...

您的#container样式会创建填充空间：

#container {
    padding: 0 20px 0 10px;
}

将其置于导航样式下，就像在菜单示例中一样，可以解决问题：

<nav>
    <div class="menu-item" id="menu-item-4">
...

Answer 2

我相信第一个网站演示，作者使用*选择器对所有元素使用重置边距和填充为0，如下所示：* {margin: 0; padding: 0}，我想你错过了在你的CSS中，对于以下内容：

.menu-item ul, .menu-item h4{
    margin: 0;
}

并且您的#container左侧有一个填充，我不知道它是否是您想要的东西，但如果您想在演示网站中制作它，则可以将其删除：< / p>

#container{
    padding-left: 0;
}