我正在尝试创建一个带有子菜单的下拉菜单,该菜单与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”类的帮助,但由于某种原因,它似乎对我没有用。任何建议都将非常有帮助!谢谢!
您只是缺少一条单独的CSS指令:
position: relative
在这里
#nav ul ul li{ display:block;}
解释:
绝对定位元素是指绝对定位或相对定位的第一个父元素。现在,子菜单正在考虑ul而不是li
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句