CSS下拉菜单

发布网友发布时间：2022-05-12 22:22

共4个回答

懂视网时间：2022-05-13 02:43

css html float 可折叠菜单

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

HTML代码：

	测试测试1						测试
			测试
				测试测试1						测试
			测试
				测试测试1						测试
			测试

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不好设置，正确的结构应该是

			测试测试1									测试
				测试
									测试测试1									测试
				测试
									测试测试1									测试
				测试

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

热心网友时间：2022-05-12 23:51

你的位置设置的不对，我给你个源代码，你对照一下
下面代码还加了CSS条件注释为达到Web标准。你看看就明白了、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级菜单</title>
<style type="text/css">
/* 整体设置*/
#menu {
margin: 0;
padding: 0;
width: 610px;
list-style-type: none;
font: 14px Arial;
}
#menu li {
float: left;
padding: 0;
margin: 0 1px 0 0;
width: 150px;
}
/* 设置菜单项*/
#menu li dl {
width: 150px;/*ie6*/;
margin: 0;
padding: 0 0 10px 0;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
}
#menu li dt a, #menu li dd a {
display: block;
}
/* 设置菜单项的dt */
#menu li dt {
margin: 0;
padding: 5px;
text-align: center;
border-bottom: 1px solid #b00;
background: ;
}
#menu li dt.orange {
background: #fa5 url(images/top.gif) no-repeat top left;
}
#menu li dt.yellow {
background: #ee5 url(images/top.gif) no-repeat top left;
}
#menu li dt.green {
background: #5e5 url(images/top.gif) no-repeat top left;
}
#menu li dt.blue {
background: #5cf url(images/top.gif) no-repeat top left;
}
#menu li dt a, #menu li dt a:visited {
display: block;
color: #333;
text-decoration: none;
}
/* 设置菜单项的dd */
#menu li dd {
margin: 0;
padding: 0;
color: #fff;
background: #47a;
}
#menu li dd.last {
border-bottom: 1px solid #b00;
}
#menu li dd a, #menu li dd a:visited {
display: block;
color: #fff;
text-decoration: none;
padding: 4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
height: 1em;
}
/*关闭子菜单*/
#menu li dd {
display: none;
}
/* 设置鼠标响应 */
#menu li:hover dd, #menu li a:hover dd {
display: block;
}
#menu li:hover, #menu li a:hover {
border: 0;
}
/*ie6*/
#menu li dd a:hover {
background: #147;
color: #9cf;
}
/*针对ie6的设置*/
#menu table {
border-collapse: collapse;
padding: 0;
margin: -1px;
font-size: 1em;
}
</style>
</head>

<body>

<ul id="menu">
<li>
<dl>
<dt class="orange"><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="yellow"><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="green"><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="blue"><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
</li>
</ul>

</body>

</html>

热心网友时间：2022-05-13 01:09

肯定是你做错了、
那位任兄说的很对
完了，就是还有个浏览器问题，浏览器因版本和生产厂家不同，而功能略有差别

热心网友时间：2022-05-13 02:44

帅哥，麻烦把代码发上来，才好解决....