CSS + DT と DD を使用して折りたたみ可能なメニューを作成する方法を教えてください。なぜセカンダリ メニューが重なるのですか? _html/css_WEB-ITnose

css html float 折りたたみメニュー

CSS + DL と DD を使用して 2 番目の折りたたみメニューを作成していますが、2 番目のメニューが常に重なってしまいます。Togetter に重ならないようにするには、他に何を追加すればよいか教えてください。

HTML コード:

<dl class="nav_dl">	<dt><a>测试测试1</a></dt>	<dd>		<ul>			<li>测试</li>			<li>测试</li>		</ul>	</dd>	<dt><a>测试测试1</a></dt>	<dd>		<ul>			<li>测试</li>			<li>测试</li>		</ul>	</dd>	<dt><a>测试测试1</a></dt>	<dd>		<ul>			<li>测试</li>			<li>测试</li>		</ul>	</dd></dl>

CSS は以下のとおりです:

ul, li, dl, dt, dd{	list-style: none outside none;	margin: 0px;	padding: 0px;}.nav_dl{	position: relative;	float: left;	margin-left: 35px;}.nav_dl dt{	float: left;	width: 100px;	height: 45px;}.nav_dl dd{	position: absolute;	top: 45px;	width: 100px;	color: #606060;	border: 2px solid #CC0000;}

ディスカッションへの返信 (解決策)

.nav_dl dd

{
位置: 絶対
幅: 100px;
カラー: #606060 Er border: 2px Solid#cc0000;
}

絶対配置を使用したので、それは重なっています : 100px;
color: #606060;
}
絶対配置を使用しているため、上部が同じなので重なっています

ただし、絶対配置を削除すると dd 要素がドキュメント フローに戻り、上部が削除され、次のようになります:


引用1階のbbjbepzzからの返信:.nav_dl dd
{
位置: 絶対;
幅: 100px;
ボーダー: 2px ソリッド #CC0000; }絶対的な位置では、上部は同じなので、互いに重なり合います

しかし、次のように...

二次メニューを 1 レベル下の 1 つの場所に置きたいので、次のときに自動的に表示されるようにプログラムを追加します。マウスがスライドしてしまいます

構造が間違っているので、CSS を設定するのが難しいです。 正しい構造は

rree
このように、CSS を再度設定すると、重複がなくなります