兼容IE6浏览器的下拉式菜单代码

最新推荐文章于 2021-06-03 01:53:01 发布

weixin_30587927

最新推荐文章于 2021-06-03 01:53:01 发布

阅读量84

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/shangcheng/archive/2011/10/10/2205602.html

版权

<!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:900px;
list-style-type:none;
font:14px "华文新魏";
}
#menu li{
float:left;
width:150px;
padding:0;
margin:0 1px 0 0;

}
#menu li dl{
width:150px;
margin:0;
padding:0 0 10px 0;
background:#cb6 url(bottom.gif) no-repeat bottom left;
}
#menu table{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}

#menu li dl dt{
margin:0px;
padding:5px;
text-align:center;
border-bottom:1px solid red;
background:#ed8 url(top.gif) no-repeat top left;
}

#menu li dl dt.red{
background-color:red;
}

#menu li dl dt.color{
background-color:#CC0099
}

#menu li dl dt.yellow{
background-color:yellow;
}

#menu li dl dt.green{
background-color:green;
}

#menu dt a,#menu dt a:visited{
display:block;
color:#333;
text-decoration:none;
}
#menu li dl dd{
margin:0;
padding:0;
color:#fff;
background:#47a;

}
#menu li dd a,#menu li dd a:visited{
height:1em;
display:block;
color:#FFF;
text-indent:10px;
text-decoration:none;
padding:4px 5px 4px 20px;
background:#47a url(arrow.gif) no-repeat 10px 10px;
}
#menu li dl dd.last{
border-bottom:1px red solid;
}
#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;
}
#menu li dd a:hover{
background:#147 url(arrow.gif) no-repeat 10px 10px;
color:#9cf;
}
</style>
</head>

<dt class="red"><a href="#">北京市的大学</a></dt>
<dd><a href="#">清华大学</a></dd>
<dd><a href="#">清华大学</a></dd>
<dd class="last"><a href="#">北京大学</a></dd>

</dl>

</td>
</tr>
</table>
</a>
</li>

<dt class="color"><a href="#">徐州市的大学</a></dt>
<dd><a href="#">矿业大学</a></dd>
<dd><a href="#">师范大学</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>

</dl>
</td>
</tr>
</table>
</a>
</li>

<dt class="yellow"><a href="#">上海市的大学</a></dt>
<dd><a href="#">复旦大学</a></dd>
<dd><a href="#">交通大学</a></dd>
<dd class="last"><a href="#">上海大学</a></dd>

</dl>
</td>
</tr>
</table>
</a>
</li>

<dt class="green"><a href="#">南京市的大学</a></dt>
<dd><a href="#">南京大学</a></dd>
<dd><a href="#">理工大学</a></dd>
<dd class="last"><a href="#">航天大学</a></dd>

</dl>
</td>
</tr>
</table>
</a>
</li>

<dt><a href="#">武汉市的大学</a></dt>
<dd><a href="#">武汉大学</a></dd>
<dd><a href="#">师范大学</a></dd>
<dd class="last"><a href="#">人民大学</a></dd>

</dl>
</td>
</tr>
</table>
</a>
</li>

</dd>

</dt>

</ul>

</body>
</html>

转载于:https://www.cnblogs.com/shangcheng/archive/2011/10/10/2205602.html

weixin_30587927

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容IE6浏览器的下拉式菜单代码

<!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 htt...
复制链接

扫一扫