【问题标题】：How to create a menu tree using HTML如何使用 HTML 创建菜单树
【发布时间】：2014-02-21 03:30:29
【问题描述】：

我需要使用 HTML 创建一个菜单树。我在 Google 上进行了搜索，但他们提供了一些软件供下载以创建它。但我需要一些脚本和 HTML 标签来做到这一点。谁能帮我解决这个问题。提前致谢。

【问题讨论】：

“菜单树”是什么意思？
点击主菜单时展开并显示所有子菜单的树
啊，我应该知道的，真的...谢谢 =)

【解决方案1】：

这是一个非常简单的开始。

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

编辑

实施我从@sushil bharwani 学到的东西。以下是我找到上述 URL 的方法，即由 @sushil bharwani 提供 http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1

【讨论】：

【解决方案2】：

你不需要使用 JavaScript（除非你想兼容过时的浏览器），你可以单独使用 HTML+CSS 来实现。并且以更语义正确的方式。 :)

您可以使用 HTMLDog 的 Sons of Suckerfish 文章中介绍的技术制作 vertical dropdown menus 或（更漂亮的示例）horizontal menus。
简单而有意义。

样本

这是一个简单的例子。在其中您可以看到悬停功能完美运行。

CSS 不好，因为它只是一个示例。
要处理样式，请禁用 display: none; 行：这将阻止子菜单在未悬停时隐藏，您可以对所有内容进行样式设置。
完成后，只需重新启用 display: none; 行即可隐藏子菜单并仅在悬停时显示。

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>

CSS

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: ", ";
}

这是一个 jsfiddle：http://jsfiddle.net/x8dxv/

【讨论】：

最好能在您链接到的部分示例中断之前介绍它们。
Nooo，已经8年了，现在你搞砸了！感谢您的建议，我添加了一个简单的示例。

【解决方案3】：

借助一点 javascript 和 CSS 知识，您可以将简单的 UL LI 列表转换为菜单树。如果你理解它，你可以使用 jQuery 是正确的。

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

【讨论】：

太棒了！我很欣赏你向她展示的方式，她也可以自己找到它。
谢谢 .. 我相信自我搜索可以让您了解更多关于我知道两年前我也在搜索的区域。
！我很惊讶你在 27 天内达到了这个声誉。这几乎是我在 10 个月内取得的成就：D。这对你来说是一个很大的成就。恭喜！！！

【解决方案4】：

导航菜单大多是使用 UL 和 LI 的组合创建的。

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

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

【讨论】：

【解决方案5】：

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

http://www.mycssmenu.com/#css-menu-demo

【讨论】：

【解决方案6】：

您可能想了解一些为您构建菜单的在线工具。例如。 CSS Menu Generator

【讨论】：

【解决方案7】：

我不确定您是否会找到答案，但这里有一个包含几种不同类型的垂直菜单的列表 http://css.maxdesign.com.au/listamatic2/index.htm 这些示例中不涉及 javascript

【讨论】：