类别树的位置和浮点问题？

Question

我正在为商店创建一个简单的类别树，我遇到了问题，看起来像这样：

问题是如何解决它出现的那个大空间root-cat:hover，任何人都可以解释什么是问题以及解决方案。

Fiddle

复制了我在树上的一些html和CSS，希望它会有所帮助。

Answer 1

您可以添加这些规则，这些规则将修复第一个子菜单的内容，部分修复其他子菜单：

root-cat {
    position: relative;
}
.sub-cat {
  position: absolute;
  left: 260px;
  top: 8px;
}

小提琴：https://jsfiddle.net/eLat18Ls/1/

注意：要使其他子菜单不显示在其页面顶部，而是显示在其主菜单条目旁边，则必须将子菜单嵌套到各自的主菜单条目中（在HTML中）。通常，这是通过无序列表完成的：ul和li元素。只需google了解如何使用ul和li构建菜单