Html 鼠标悬停时的下拉菜单

我正在尝试创建一个下拉菜单，当我将鼠标悬停在菜单栏上或单击“多媒体资料”时，该菜单将展开。我以为我知道我在做什么，但它不起作用，所以很明显我做错了什么。如果有人看到我的错误，请告诉我

这就是我目前拥有的：

#菜单栏{
宽度：100%；
身高：100%；
背景色：白色；
位置：相对位置；
}
#选择权{
列表样式类型：无；
位置：绝对位置；
右：15px；
底部：1%；
字体系列：“蒙特塞拉特”，“无衬线”；
字号：900；
字体大小：2vw；
}
李{
显示：内联；
}
#选项库{
填充物：5px；
右侧填充：15px；
左侧填充：15px；
颜色：黑色；
文字装饰：无；
}
#选项库：悬停#库{
显示：网格；
}
a:链接{
填充物：5px；
右侧填充：15px；
左侧填充：15px；
颜色：黑色；
文字装饰：无；
}
a:主动的{
背景色：#EFEF；
填充物：5px；
右侧填充：15px；
左侧填充：15px；
颜色：黑色；
文字装饰：无；
边界半径：50px；
}
a:参观了{
填充物：5px；
右侧填充：15px；
左侧填充：15px；
颜色：黑色；
文字装饰：无；
}
a:悬停{
背景色：#EFEF；
填充物：5px；
右侧填充：15px；
左侧填充：15px；
边界半径：50px；
文字装饰：无；
}
#画廊{
显示：无；
网格模板列：重复（3，1fr）；
宽度：100%；
身高：100%；
填充：0px；
边际：0px；
z指数：30；
位置：绝对位置；
左：0px；
顶部：0px；
}
#画廊视频{
背景色：#EFEF；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体系列：“蒙特塞拉特”，“无衬线”；
动画：动画0.5s向前0.5s线性；
}
#画廊视频a{
位置：绝对位置；
显示：块；
宽度：33.33%；
身高：100%；
z指数：35；
}
#画廊设计{
背景色：#00CC52；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体系列：“蒙特塞拉特”，“无衬线”；
动画：动画0.5s向前0.4s线性；
}
#画廊设计a{
位置：绝对位置；
显示：块；
宽度：33.33%；
身高：100%；
z指数：35；
}
#画廊其他{
背景色：#0541D8；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体系列：“蒙特塞拉特”，“无衬线”；
动画：动画0.5s向前0.3s线性；
}
#其他画廊a{
位置：绝对位置；
显示：块；
宽度：33.33%；
身高：100%；
z指数：35；
}
@动画关键帧{
0% {
转换：translateY（-150%）；
不透明度：1；
}
100% {
变换：translateY（0px）；
不透明度：1；
}
}

库


视频
设计
其他

我不确定评论中的链接是否会永久存在，因此，如果您想回顾此链接以供参考，以下是答案：

html，
身体，
.flex{
身高：100%；
}
身体{
字体系列：蒙特塞拉特、Arial、Helvetica、无衬线字体；
/*更改字体系列*/
保证金：0；
}
navbar先生{
溢出：隐藏；
背景色：#ccc；
/*变色*/
}
.navbar.navlink{
浮动：左；
文本对齐：居中；
文字装饰：无；
字体大小：16px；
/*更改字体大小*/
填充：14px 16px；
/*换衬垫*/
颜色：黑色；
/*更改文本颜色*/
}
.subnav{
浮动：左；
溢出：隐藏；
}
.subnav.subnavbtn{
保证金：0；
边界：无；
大纲：无；
背景色：继承；
字体家族：继承；
光标：指针；
填充：14px 16px；
/*换衬垫*/
字体大小：16px；
/*更改字体大小*/
}
.navbar.navlink:悬停，
.subnav:悬停.subnavbtn{
背景颜色：浅绿色；
/*变色*/
}
.subnav内容{
位置：绝对位置；
显示：无；
宽度：100%；
z指数：1；
不透明度：0；
左：0；
背景颜色：浅蓝色；
/*变色*/
}
#画廊{
宽度：100%；
显示：网格；
网格模板列：重复（3，1fr）；
}
.画廊{
宽度：100%；
对齐项目：居中；
证明内容：中心；
}
#g-视频{
背景色：#EFEF；
}
#g-设计{
背景色：#00CC52；
}
#g-其他{
背景色：#0541D8；
}
.subnav内容a{
文字装饰：无；
颜色：黑色；
}
.subnav：悬停.subnav内容{
显示器：flex；
不透明度：1；
}
.subnav:hover#g-videos{
动画：进入动画。向前6秒；
}
.subnav:hover#g-design{
动画：进入动画。5s向前；
}
.subnav:hover#g-other{
动画：进入动画。4s向前；
}
@动画关键帧{
0% {
转换：translateY（-150%）；
}
100% {
变换：translateY（0px）；
}
}

画廊

我注意到您在菜单栏上有

style=100%

，并且在css中定义了它。这不是你的问题的一部分，我只是想指出这一点。另外，

#图库

具有

显示：无

。这应该是默认设置的吗？如果是这样的话，既然这个问题没有附加服务器端代码、媒体查询或javascript，那么您打算如何删除它来查看代码？@RickSibley

#menubar

样式是我将所有css都放在html文件中时遗留下来的，感谢您捕捉到了这一点。我试图将

#图库

设置为

显示：无

，因为我试图复制我看到的内容。如果这不是应该怎么做的，那可能是我的问题。你的布局不应该更像那种下拉列表吗？注意：它被简化了，所以我没有添加你所有的样式。@RickSibley这几乎就是我想要的。我做的大部分只是为了布局。有没有办法让选项单独滑入，比如从右开始，然后向左移动？我试过这么做，但事情就是这样