带有子菜单 CSS HTML 的下拉菜单答案

【问题标题】：Dropdown Menu with Submenu CSS HTML带有子菜单 CSS HTML 的下拉菜单
【发布时间】：2016-06-18 14:08:32
【问题描述】：

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

这是我正在谈论的小提琴代码：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 的“子”类的帮助，但由于某种原因它似乎对我不起作用。任何建议都会很有帮助！谢谢！

【问题讨论】：

标签： html css menu

【解决方案1】：

您只是缺少一条 css 指令：

position: relative

在这里

#nav ul ul li{ display:block;}

解释：

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

【讨论】：

【解决方案2】：

您需要将position: relative 添加到绝对定位的ul 的父li。

绝对定位的元素是相对于它们最近的祖先定位的。位置不是position: static（默认）的任何父元素都被视为祖先元素，因此将position: relative 添加到li 元素使其成为其子元素ul 的最近祖先。

http://learnlayout.com/position.html

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

使用您当前的示例，您可以这样做。

.sub { position: relative; }

或者像这样

#nav ul ul li { 
  display:block;
  position: relative;
}

https://jsfiddle.net/h96jda5h/1/

【讨论】：