Html 导航元素上的CSS下拉列表

我有一个导航栏，里面有一些链接（使用ul和li和锚），我正试图找出如何使某些链接下拉列表中有更多的链接。我试着遵循w3schools的下拉列表示例，但似乎我的链接只是“挤”在一起。代码如下：

。下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}

我为您创建了一个。这就是你要找的吗？

---

你可以让你的内容

显示：flex柔性方向时的code>列而不是
显示：块
如果你想让下拉列表最终进入和退出动画，除非你是一个真正的css向导，否则你需要使用javascript。基本上，您将在mouseenter上添加一个
visible
类，该类将下拉列表从
display:none
更改为
display:block
，并设置动画的开始状态，如
opacity:0
。然后，在
requestAnimationFrame
之后，在
类中添加一个设置动画最终状态的
，如
opacity:1
。需要requestAnimationFrame，因为从
none
转到
block
会导致浏览器取消任何css动画

关闭动画的原理是相同的：在mouseout上删除
类中的
，然后在动画超时多长时间后，删除
可见的
类。
实际上不是。。我的问题是下拉链接没有在我的主导航链接下面。他们和它并排挤在一起..下面是什么意思？你能画出你想要达到的目标吗？