Please tell me how to use CSS DT and DD to create a collapsible menu. Why do the secondary menus overlap? _html/css_WEB-ITnose

css html float collapsible menu

I use CSS DL and DD to make a secondary collapsible menu, but the secondary menus always overlap. Please tell me what else should be added to my CSS. Keep them from overlapping?

HTML code:

<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 is below:

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;}

Reply to discussion (solution)

. nav_dl dd
{
position: absolute;
top: 45px;
width: 100px;
color: #606060;
border: 2px solid #CC0000;
}

Because you used absolute positioning, the top is the same, so they overlap together

.nav_dl dd
{
position: absolute;
top: 45px;
width: 100px;
color: #606060;
border: 2px solid #CC0000;
}

Because you used absolute positioning, the top is the same, so it overlaps Together

But if you remove the absolute positioning, let the dd element return to the document flow, and remove top, it will become like this:

Quote from bbjbepzz's reply on the 1st floor :.nav_dl dd
{
position: absolute;
top: 45px;
width: 100px;
color: #606060;
border: 2px solid #CC000 0;
}

Because you used absolute positioning, the tops are the same, so they overlap.

But like...

I want the secondary menus to be all in one place. level below, and then I will add a program to make it automatically appear when the mouse slides over

Your structure is incorrect, so the CSS is difficult to set. The correct structure should be

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

In this way, if you set the CSS again, it will take effect and there will be no overlap