2
ulとliのネストされたナビゲーションを作成したいと思います。サブアイテムを持つこともできます。CSSをネストした次の行の子を持つナビゲーション
親アイテムliにativeクラスがある場合、サブアイテムは次の行に表示されます（このクラスはjavascriptでonclickに設定されています）。
サブリストにposition: absolutがある場合に限り、私はその管理を行いました。 残念ながら、それは次のコンテンツと重複します。
これは、それがどのように見えるかです：
私は本当にposition: absolutを使用せずにこれを実行したいのですが、方法を考えることはできません。
誰でも手伝ってもらえますか？
私はコードに従っています。
ul {
list-style: none;
padding: 0;
position: relative
}
li {
display: inline-block;
border: 1px solid deeppink;
margin: 5px 5px 0 5px;
}
ul ul {
position: absolute;
display: none;
left: 0;
}
ul ul li {
border: 0;
border-bottom: 1px solid black;
}
ul li.isActive {
background-color: yellow;
}
ul li.isActive ul {
display: block;
}
span {
padding: 5px;
}<ul>
<li>
<span>top1</span>
</li>
<li class="isActive">
<span>top2</span>
<ul>
<li>
<span>sub1</span>
</li>
<li>
<span>sub2</span>
</li>
</ul>
</li>
<li>
<span>top3</span>
<ul>
<li>
<span>other sub1</span>
</li>
<li>
<span>other sub2</span>
</li>
</ul>
</li>
</ul>
<span>
Some text.
</span>
を - 代替ではなく、サブメニューを絶対的に配置すると、表示されたときに残りのサイトコンテンツが押し下げられます。それは通常、乱雑に見えます。特にアイテムの数のために異なる高さのサブメニューがある場合。通常、あなたが今持っているものは、人々が望むものです... – CBroe
はい、私はそれが欲しいです。しかし、私はそれを達成する方法を知らない。私が完璧を取り除くと、それは完全に間違っているように見えます... – KittyKat
同じように見えるようにすることは、絶対的な位置付けがなければ簡単になることはありません。しかし、JSはとにかく演奏されているので、効果を達成するために、メインウルに対応する余白を追加することもできます。あなたのサブメニューが1つの「行」しかカバーしないことが確かな場合は、静的な値を使用することができます（フォントサイズに関連するものが好ましい）。そうでなければ、最初に示された特定のサブメニューの高さを照会し、動的に... – CBroe