我不确定内容窗格是否适合用于此目的，但我想要实现的内容绝对接近该描述。
我正在尝试编写一个网页，其中包含一个带有List的部分，其子列表在悬停时会将自己的子设备显示在侧面的“内容”窗格中，以便右侧的空间填充有关于悬停列表项目。例如，假设列表如下：
使用我当前的方法（在下面更详细地描述），我有一个显示在右侧的格式化内容的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>
等
答案 0 :(得分：1)
删除所有uls的相对位置，然后只分配给ul本身。
#Content_Menu > ul {
position: relative;
}
这里没有相关职位：
#Content_Menu ul {
padding: 0;
list-style-type: none;
}