请教用CSS + DT、DD做可折叠菜单，二级菜单为什么会重叠在一起？_html/css_WEB-ITnose

css html float 可折叠菜单

我用CSS + DL、DD做二级可折叠菜单，但二级菜单总是重叠在一起~请教大家我的CSS里面还应该加什么东西才能让他不重叠在一起？

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
{
position: absolute;
top: 45px;
width: 100px;
color: #606060;
border: 2px solid #CC0000;
}

你因为你用了绝对定位，top是一样的，所以重叠在一起了

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

你因为你用了绝对定位，top是一样的，所以重叠在一起了

可是如果把绝对定位去掉，让dd元素回归文档流，并把top去掉,那就变成这样了：

引用 1 楼 bbjbepzz 的回复:.nav_dl dd
{
position: absolute;
top: 45px;
width: 100px;
color: #606060;
border: 2px solid #CC0000;
}

你因为你用了绝对定位，top是一样的，所以重叠在一起了

可是如……

我想要二级菜单都在一级下面，然后我再加程序让他在鼠标滑过的时候自动出来

你的结构不正确，所以CSS不好设置，正确的结构应该是

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

这样你再设置CSS就会生效了，不会重叠了