我做了一次尝试here。但是，它有两个问题：
有更好的方法吗？
答案 0 :(得分：4)
你没有真正详细说明你的标准是什么，但从你所说的，我建议你看看SlickMap CSS。
更新：知道了！我记得我在哪里看到了你想要的东西：
jsTree是一个jQuery插件，可以创建一个具有所需样式的树窗口小部件，并在内部使用<ul>来表示它。
答案 1 :(得分：1)
尝试下面的代码，它是纯CSS，没有JS / jQuery（IMO更兼容），通过操纵边框和间距来工作。
适用于FF / Chrome＆amp;的 IE 即可。享受： - ）
.parent a,
li {
font-size: 22px;
color: #000;
font-family: "Source Sans Pro", sans-serif;
}
.child a,
li {
font-size: 18px;
color: #000;
}
.subchild a,
li {
font-size: 18px;
color: #888888;
}
.s2child a,
li {
font-size: 16px;
color: #ccc;
}
.tree,
.tree ul {
list-style-type: none;
margin-left: 0 0 0 10px;
padding: 0;
position: relative;
overflow: hidden;
}
.tree li {
margin: 0 0 0 15px;
padding: 0 12px 0 20px;
position: relative;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
.tree li::before {
border-top: 2px solid #000;
top: 14px;
width: 15px;
height: 0;
}
/* vertical line on list items */
.tree li:after {
border-left: 2px solid #000;
height: 100%;
width: 0px;
top: -5px;
}
/* lower line on list items from the first level because they don't have parents */
.tree > li::after {
top: 15px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after {
display: none;
}
/* hide line from before the Home or starting page or first element */
.tree > li:first-child::before {
display: none;
}
.tree ul:last-child li:last-child:after {
height: 20px;
}
.tree a:hover {
color: red;
font-weight: 500;
text-shadow: 1px 2px 2px #F3F3F3;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pure CSS Tree</title>
<link href="tree.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="tree">
<li class="parent"><a href="#">Grand Parent</a>
<ul>
<li class="child"><a href="#">Parent</a>
</li>
<li class="child"><a href="#">Parent</a>
<ul>
<li class="subchild"><a href="#">Child</a>
<ul>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="last s2child"><a href="#">Grand Child</a>
</li>
</ul>
</li>
<li class="subchild"><a href="#">Child</a>
<ul>
<li class="s2child"><a href="#">Grand Child</a>
</li>
<li class="s2child"><a href="#">Grand Child</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="child"><a href="#">Parent</a>
</li>
</ul>
</li>
</ul>
</body>
</html>