我不确定内容窗格是否是用于此的正确术语，但我试图实现的目标肯定接近该描述。
我正在尝试编写一个网页，该网页有一个带有列表的部分，其中的子列表在悬停时会将其自己的子列表显示到侧面的“内容”窗格中，以便右侧的空间充满有关悬停的信息-在列表项上。例如，假设列表如下：
- 研讨会
- 车间A
- 车间B
- 车间C
- 训练
- 培训计划A
- 培训计划 B
- 产品
- 产品A
- 产品B
- 产品C
使用我当前的方法（在下面更详细地描述）我有一个 div，其右侧显示了格式化的内容，但是每个部分都在相应的第二层列表中的第一项右侧显示了这个第三层 div。我希望有一种方法可以让这第三层总是出现在这棵树的最开始的右侧，但我不确定如何。
我觉得只有 CSS 的方法是可行的，所以我的问题是：如何让第三层列表（以 div 的形式）显示在第一个项目符号的右侧，无论它来自哪个第二层?
我目前的代码如下：
/* ------------------------ Pane --------------------------- */
#Content_Menu {
margin: 0px;
padding: 0px;
}
/* Main List */
#Content_Menu ul {
position: relative;
left: 10px;
padding: 0;
list-style-type: none;
}
#Content_Menu li {
margin: 0px;
padding: 0px;
text-decoration: none;
list-style: none;
text-align: left;
}
/* Sub List */
#Content_Menu li ul {
position: relative;
left: 20px;
top: 100%;
padding: 0px;
margin: 0px;
}
/* Sub-Sub List aka. Content Pane */
#Content_Menu li ul li ul{
display: none;
position: absolute;
left: 40%;
top: 0px;
padding: 0px;
margin: 0px;
}
#Content_Menu li ul li:hover ul{
display: inline;
padding: 0px;
margin: 0px;
}
html是：
<div id='Content_Menu'>
<ul>
<li><a href='Service_Workshop.html'><span>Workshops</span></a>
<ul>
<li>
<a href='#'><span>Workshop A</span></a>
<ul>
<li>
<div class="Content_Pane_Info">
<h3> Workshop A </h3>
</div>
<p> This is sample text /<p>
</li>
</ul>
</li>
<li>
<a href='#'><span>Workshop B</span></a>
<ul>
<li>
<div class="Content_Pane_Info">
<h3> Workshop B </h3>
</div>
<p> This is sample text /<p>
</li>
</ul>
</li>
等等