Html 在navba中使用CSS的简单下拉菜单

我试图在一个有多个链接的导航栏中创建一个简单的下拉菜单（只有CSS），问题是下拉菜单将显示每个链接，而不仅仅是所需的链接。代码如下：

HTML和CSS

ul{
列表样式：无；
}
托普纳夫先生{
背景色：#ff66b3；
溢出：隐藏；
盒影：0.10px rgba（0,0,0,0.5）；
位置：相对位置；
}
.topNav a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 8px；
文字装饰：无；
字体大小：14px；
}
.topNav a:悬停{
背景色：#ffb3d9；
颜色：黑色；
}
.下拉列表{
显示：无；
位置：绝对位置；
z指数：1；
最小宽度：160px；
}
.下载{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.topNav.mainLink:悬停.下拉列表{
显示：块；
}

---

您在

更改

.mainLink:hover

至

\menuIcon:hover

。。。但实际上，当我将代码放入代码段时，您的代码不起作用，下拉列表中没有链接的子项将其更改为

#menuIcon:hover~。下拉列表

@DaniP已经完成，但不起作用。@DaniP很好，这是可行的，但当你移动指针时，菜单会淡出，而且是lnline而不是DROPDOWN。我已经回答了你的问题。Yep@Simone检查现在编辑的代码片段正在你的CSSok上进行小的更改，这比我想要的更有可能。但是链接仍然是内联的，不像下拉菜单。@Simone因为您在div中浮动了所有的a标记，所以只需将其更改为none浮动onse inside下拉菜单，检查编辑的代码段。。。。我使用灰色背景只是为了显示