html - 带有子菜单 CSS HTML 的下拉菜单

Question

我正在尝试创建一个下拉菜单，其中的子菜单与 HTML/CSS 中的父项对齐，但我无法正确对齐。现在，子菜单只出现在列表的顶部，而不是与其父菜单处于同一级别。

这是我所说的 fiddle 代码:https://jsfiddle.net/h96jda5h/

我认为它与 CSS nav 属性有关，但我不确定是什么:

#nav ul{ list-style-type:none; padding:0; margin:0; }
#nav ul li{ display:inline-block; }
#nav ul li:hover{ background-color:#FFF; }
#nav ul li a,visited{ display:block; padding:15px; text-decoration:none; }
#nav ul li:hover >ul{ display:block;}
#nav ul ul{display:none; position:absolute; background-color:#FFF; min-width:200px; }
#nav ul ul li{ display:block;}
#nav ul ul li:hover{ background-color:#F1F7F7; }
#nav ul ul li"hover > ul{ display: block; }
#nav ul ul ul{ margin: -52px 0 0 200px; background-color:#FFF; }

我在该网站上搜索了答案并找到了有关 li 的“子”类的帮助，但由于某种原因它似乎对我不起作用。任何建议都会很有帮助!谢谢!

Answer 1

您只是缺少一条 CSS 指令:

position:relative

在这里

#nav ul ul li{ display:block;}

解释:

绝对定位元素是指第一个绝对或相对定位的父元素。现在，子菜单正在考虑 ul 而不是 li