Html 纯css手风琴菜单溢出

以下是我的问题：

我试图复制一些手风琴菜单与纯css和html与我自己的理解。但是每次我点击profile两次都会发生一些奇怪的事情，一些溢出会发生

有人能告诉我错误在哪里吗？解释一下为什么会这样

{
位置：绝对位置；
顶部：10px；
左：10px；
}
.菜单{
宽度：300px；
长方体阴影：0.3pxRGBA（0,0,0,0.5）；
边界半径：5px；
溢出：隐藏；
}
.菜单ul{
列表样式：无；
填充：0；
保证金：0；
}
.菜单.菜单切换{
背景#2980b9；
显示：块；
位置：相对位置；
颜色：白色；
填充：10px 15px；
}
.菜单.菜单切换：悬停{
文字装饰：无；
}
.菜单.菜单切换：之前{
内容：“；
位置：绝对位置；
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px实心#2980b9；
底部：-10px；
左：5px；
可见性：隐藏；
}
.菜单.子菜单：目标{
最大高度：10公分；
}
.菜单.菜单切换i{
右边距：10px；
}
.菜单.子菜单{
背景#2c3e50；
过渡：最大高度0.3s；
最大高度：0；
溢出：隐藏；
}
.菜单.子菜单{
左侧填充：25px；
}
.菜单.子菜单ul li{
填充：10px 10px；
}
.菜单.子菜单ul li a{
颜色：白色；
}
.菜单.子菜单ul li a i{
右边距：10px；
}
.菜单.子菜单ul li a:悬停{
文字装饰：无；
}

试验

我从

菜单中删除了
位置：绝对。菜单切换：在
阻塞之前，这似乎可以解决您的问题-但是，我不清楚此阻塞的目的是什么，因此您可能只想将其设置为
位置：相对
，以便进行故障排除


{
位置：绝对位置；
顶部：10px；
左：10px；
}
.菜单{
宽度：300px；
长方体阴影：0.3pxRGBA（0,0,0,0.5）；
边界半径：5px；
溢出：隐藏；
}
.菜单ul{
列表样式：无；
填充：0；
保证金：0；
}
.菜单.菜单切换{
背景#2980b9；
显示：块；
位置：相对位置；
颜色：白色；
填充：10px 15px；
}
.菜单.菜单切换：悬停{
文字装饰：无；
}
.菜单.菜单切换：之前{
内容：“；
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px实心#2980b9；
底部：-10px；
左：5px；
可见性：隐藏；
}
.菜单.子菜单：目标{
最大高度：10公分；
}
.菜单.菜单切换i{
右边距：10px；
}
.菜单.子菜单{
背景#2c3e50；
过渡：最大高度0.3s；
最大高度：0；
溢出：隐藏；
}
.菜单.子菜单{
左侧填充：25px；
}
.菜单.子菜单ul li{
填充：10px 10px；
}
.菜单.子菜单ul li a{
颜色：白色；
}
.菜单.子菜单ul li a i{
右边距：10px；
}
.菜单.子菜单ul li a:悬停{
文字装饰：无；
}

试验