Javascript 如何使用HTML创建菜单树

我需要创建一个菜单树使用HTML。我在谷歌上搜索过，但是他们提供了一些软件下载来创建这个。但我需要一些脚本和HTML标记来完成这项工作。 谁能帮我解决这个问题。

---

提前感谢。

通过一点javascript和CSS知识，您可以将简单的UL LI列表转换为菜单树。如果您理解jQuery，就可以使用它

---

您可以使用ulli通过菜单树缩小谷歌搜索范围。或CSS将UL LI转换为树。

导航菜单主要使用UL和LI的组合创建

<UL id="Menu">
    <LI>Home</LI>
    <LI>Links</LI>
</UL>

主页
链接

---

您可以在LI元素中插入UL，从而获得用于导航的树结构。

如果您不想自己编写一个，这里有一个简单的方法

---

这里有一个非常简单的开始

编辑 实现我从@sushil bharwani学到的东西。 以下是我如何找到上述URL的，即@sushil bharwani提供的

---

您可能需要查看一些为您构建菜单的在线工具。例如，

我不确定你是否能找到答案，但这里有一个列表，列出了几种不同类型的垂直菜单

---

这些示例中没有涉及javascript

您不需要使用javascript（除非您希望与过时的浏览器兼容），您可以单独使用HTML+CSS来实现。而且在语义上更加正确。：）

您可以使用HTMLDog上文章中介绍的技术制作或（更漂亮的示例）。
简单而有意义

---

样品 下面是一个简单的例子。在其中，您可以看到悬停功能完美地工作

CSS不好，因为它只是一个示例。
要使用样式，请禁用

显示：无行：这将阻止子菜单在未悬停时隐藏，您可以对所有内容进行样式设置。

完成后，只需重新启用
显示：无行以获取要隐藏的子菜单并仅在悬停时显示

HTML

<nav>
<p>Collapsing:</p>
<ul class="collapsable">
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
<p>Not collapsing:</p>
<ul>
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
</nav>

这是一个JSFIDLE:
你所说的“菜单树”是什么意思？当点击主菜单时，它会展开并显示所有子菜单，我应该得到它，真的……谢谢=）太棒了！我很感激你让她知道她自己也能找到它。谢谢。。我相信自我搜索可以让你了解更多我知道我在这两年前也在搜索的领域。！我很惊讶你在27天内就达到了这个声誉。这几乎是我在10个月内取得的成就：D.这对你来说是一个巨大的成就。祝贺在你链接到的部分示例崩溃之前，最好先介绍它们。不，它已经运行了8年，现在你把它搞糟了！谢谢你的建议，我添加了一个简单的例子。
nav li:hover {
    background: #EEEEEE;
}
nav li>ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}
nav .collapsable li>ul {
    display: none;
}
nav li>ul::before {
    content: ": { ";
}
nav li>ul::after {
    content: " } ";
}
nav li:hover>ul {
    display: inline-block;
}
nav li>ul>li {
    display: inline-block;
}
nav li>ul>li+li::before {
    content: ", ";
}