Html CSS转换（垂直级联菜单）

很长一段时间以来，我一直想替换我电脑里的字母菜单（左侧）。我去寻找一个像样的手风琴风格的菜单，发现它看起来很容易实现，并且可以做我想做的事。
稍微改变一下周围的情况，使菜单本身看起来更像。
好的，到目前为止还不错。直到我尝试将其放入我现有的开发中，它基本上与“独立”菜单相似。
我在CSS中寻找了冲突，但由于不擅长，我没有发现冲突。你们中的任何一位大师都能为我提供一些指导。
很抱歉包含了这些链接，但我认为这是最好的方式来展示正在发生的事情。
我看到其他人使用了相同的基本菜单，但找不到与我看到的相似的菜单。
//艾尔

---

（编辑此项以删除两个单词-语法！）

您的菜单嵌入在：

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

将其置于导航样式下，如您的菜单示例中所示，应自行解决问题：

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

...

我相信在第一个站点演示中，作者使用

*

选择器对所有元素使用了重置边距和填充为0，如下所示：

*{margin:0；padding:0}

，我认为您在css中缺少了这一点，原因如下：

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

另外，您的

#容器的左侧有一个填充物，我不知道这是否是您想要的，但是如果您想在演示站点中使用它，您可以将其删除：

#container{
    padding-left: 0;
}

#container{
    padding-left: 0;
}