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

施密特

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

这是我正在谈论的小提琴代码:https : //jsfiddle.net/h96jda5h/

我认为这与CSS导航属性有关,但我不确定是什么:

#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的“ sub”类的帮助,但由于某种原因,它似乎对我没有用。任何建议都将非常有帮助!谢谢!

马蒂亚·诺切里诺(Mattia Nocerino)

您只是缺少一条单独的CSS指令:

position: relative

在这里

#nav ul ul li{ display:block;}

解释:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章