コンテンツ ペインがこれに使用する適切な用語かどうかはわかりませんが、私が達成しようとしているのは間違いなくその説明に近いものです。
リストを含むセクションを持つ Web ページを書き込もうとしています。サブリストは、ホバーすると、右側のスペースがホバーに関する情報で満たされるように、横の「コンテンツ」ペインに独自のサブを表示します-オーバー リスト アイテム。たとえば、リストが次のようになっているとします。
- ワークショップ
- ワークショップA
- ワークショップB
- ワークショップC
- トレーニング
- トレーニングプログラムA
- 研修プログラムB
- 製品
- 製品A
- 製品B
- 製品C
私の現在の方法 (以下で詳しく説明します) では、フォーマットされたコンテンツが右側に表示される div がありますが、各セクションでは、対応する 2 番目の層リストの最初の項目の右側にこの 3 番目の層の div が表示されます。この 3 番目の層を常にこのツリーの最初の右側に表示する方法があることを願っていますが、その方法はわかりません。
これにはCSSのみのアプローチが可能だと思うので、私の質問は次のとおりです。どの2番目の層から発生したかに関係なく、最初の箇条書きの右側に表示する3番目の層リスト(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>
等