Javascript 具有图标、弯曲连接器和悬停效果的响应式平面CSS树菜单

我在设置CSS树菜单的样式时遇到了一个问题，其中的连接器和类别被命名为图标+文本（可以是正方形）。可能有一些工具提示或带有简短说明的模式窗口。我试图让它工作的代码是：

目标是：

---

有人知道如何弯曲这些连接器并将其连接起来，从而使其响应更快吗？仅使用CSS是否可能？

我99.9%确信，仅使用CSS无法实现这一点，您需要一些JS。我正试图尽量减少使用JS，但出于这个原因，即使这样，我也可以。您只需找到元素的所有父元素：使用JS悬停，这将非常轻松。