您的位置：首页 > Web前端 > HTML

支持IE6的二级列表

2012-03-02 16:05 162 查看

<!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" />

<script type="text/javascript"><![CDATA[//><!]]></script>

<style>

body, ul, li { margin:0;padding:0; font-size:12px; line-height: 2em;}

a{

text-decoration:none;

color:#000000

}

a:hover{

text-decoration:none;

color:#FF0000;

}

#menu{

margin:50px 20px;

width: 100px;

border: 1px solid #CCC;

}

#menu ul{

list-style: none;

}

#menu ul li{

background-color:#eee;

border-bottom:1px solid #ccc;

line-height:26px;

padding:0px 10px;

position:relative;

height:26px;

}

#menu ul li ul{

position:absolute;

top:-1px;

left:100px;

width:100px;

border:1px solid #ccc;

border-bottom:none;

display:none;

}

#menu ul li.current ul { display:block;}

#menu ul li:hover ul { display:block;}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>

</li>

<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>

</li>

<li><a href="#">div+css实例</a></li>

<li><a href="#">常用代码</a></li>

<li><a href="#">站长杂谈</a></li>

<li><a href="#">技术文档</a></li>

<li><a href="#">资源下载</a></li>

<li><a href="#">图片素材</a></li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ie function xhtml menu html 文档

相关文章推荐

新的分享

章节导航