首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 使用了position:absolute;之后的多个dd为何会重叠?

使用了position:absolute;之后的多个dd为何会重叠?

时间：2010-09-07

来源：互联网

原本是想用dl做个三级菜单,可是第三级子菜单(即dd)定位起来却很麻烦,原本想用position:absolute将其定位到二级菜单的右边,可是用了之后发现dd会重叠起来,搞不明白是什么原因.
<!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=utf-8" /> <title>三级菜单</title> <style type="text/css"> h2,dl,dt,dd{margin:0; padding:0; font-size:12px; line-height:21px;} h2,dt,dd{background-color:#efefef; width:170px; height:25px; cursor:default; line-height:25px;} h2{border-left:#fff solid 1px; border-right:#ccc solid 1px; text-align:center;} dt,dd{border-top:#fff solid 1px; border-bottom:#ccc solid 1px;} dl{position:relative;} dd{background-color:#990066; position:absolute; margin-left:170px;} #divi{margin:100px;} </style> </head> <body> <div id="divi"> <h2>一级菜单1</h2> <dl> <dt>二级菜单1_1</dt> <dd>三级菜单1_1_1</dd> <dd>三级级菜级菜菜单1_1_2</dd> <dd>三级菜单1_1_3</dd> <dt>二级菜单1_2</dt> <dd>三级菜单1_2_1</dd> <dd>三级菜单1_2_1</dd> <dt>二级菜单1_3</dt> </dl> </div> </body> </html>
 提示：您可以先修改部分代码再运行
[ 本帖最后由 inload 于 2010-9-7 16:07 编辑 ]

附件

未标题-1.gif (2.21 KB)

2010-9-7 16:07

原本应该是这种效果的

作者: inload   发布时间: 2010-09-07

<!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=utf-8" />
<title>几种纯css菜单-http://www.heartonline.com.cn/blog/article.asp?id=326</title>
<style type="text/css">
/* the all */
body {font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:30px;}
table {border-collapse:collapse;}
td {padding:0;}

/* the first */
#nav1 {width:500px; margin-bottom:50px;}
        #nav1 a {display:block; padding-left:33px; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; margin-bottom:1px;}
        #nav1 a:hover {background:#ff0; color:#2c3d43;}
        #nav1 a div {display:none; padding-left:20px;}
        #nav1 a:hover div {display:block;}
        #nav1 a div a {display:inline; padding:0 10px; color:#595D66; background:transparent;}
        #nav1 a div a:hover {color:#000; text-decoration:underline;}
        
/* the second */
#nav2 {width:200px; margin-bottom:50px;}
        #nav2 a {display:block; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; margin-bottom:1px;}
        #nav2 a:hover {background:#2c3d44;}
        #nav2 table {width:100%;}
        #nav2 a div {display:none;}
        #nav2 a:hover div {display:block;}
        #nav2 a div a {display:block; width:100%; padding:0 20px; color:#595D66; background:#DCE7ED;}
        #nav2 a div a:hover {color:#000; background:#A6C4CE;}

/* the third */
#nav3 {width:120px; margin-bottom:50px;}
        #nav3 a {display:block; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; margin-bottom:1px;}
        #nav3 a:hover {background:#DCE7ED; color:#000;}
        #nav3 table {width:100%;}
        #nav3 td.main {padding-left:20px;}
        #nav3 a div {display:none;}
        #nav3 a:hover div {display:block; position:absolute; top:318px; left:150px;}
        #nav3 a div a {display:block; width:100%; padding:1px 20px; color:#595D66; background:#DCE7ED; margin-bottom:0px;}
        #nav3 a div a:hover {color:#000; background:#A6C4CE;}

/* the fourth */
#nav4 {width:400px; margin-bottom:50px;}
        #nav4 a {display:block; width:100px; float:left; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; border-bottom:1px solid #fff;}
        #nav4 a:hover {background:#2c3d44;}
        #nav4 table {width:100px;}
        #nav4 td.main {text-align:center;}
        #nav4 a div {display:none;}
        #nav4 a:hover div.m1 {display:block; position:absolute; top:488px; left:30px;}
        #nav4 a:hover div.m2 {display:block; position:absolute; top:488px; left:130px;}
        #nav4 a:hover div.m3 {display:block; position:absolute; top:488px; left:230px;}
        #nav4 a:hover div.m4 {display:block; position:absolute; top:488px; left:330px;}
        #nav4 a div a {width:100px; text-indent:20px; color:#595D66; background:#0cc;}
        #nav4 a div a:hover {color:#000; background:#A6C4CE;}
        
</style>
</head>

<body>
<a href="http://www.google.com.hk/custom?q=CSS%E8%8F%9C%E5%8D%95&sitesearch=www.heartonline.com.cn" target="_blank">点击浏览更多CSS菜单效果</a><br /><br />
<!--the first-->
<div id="nav1">
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU1</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU2</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU3</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU4</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
</div>

<!--the second-->
<div id="nav2">
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU1</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU2</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU3</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU4</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
</div>

<!--the third-->
<div id="nav3">
        <a href="#">
                <table>
                        <tr><td class="main">MENU1</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1_1</a>
                                        <a href="#">item1_2</a>
                                        <a href="#">item1_3</a>
                                        <a href="#">item1_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU2</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item2_1</a>
                                        <a href="#">item2_2</a>
                                        <a href="#">item2_3</a>
                                        <a href="#">item2_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU3</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item3_1</a>
                                        <a href="#">item3_2</a>
                                        <a href="#">item3_3</a>
                                        <a href="#">item3_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU4</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item4_1</a>
                                        <a href="#">item4_2</a>
                                        <a href="#">item4_3</a>
                                        <a href="#">item4_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
</div>

<!-- the fourth -->
<div id="nav4">
        <a href="#">
                <table>
                        <tr><td class="main">MENU1</td></tr>
                        <tr><td>
                                <div class="m1">
                                        <a href="#">item1_1</a>
                                        <a href="#">item1_2</a>
                                        <a href="#">item1_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td class="main">MENU2</td></tr>
                        <tr><td>
                                <div class="m2">
                                        <a href="#">item2_1</a>
                                        <a href="#">item2_2</a>
                                        <a href="#">item2_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td class="main">MENU3</td></tr>
                        <tr><td>
                                <div class="m3">
                                        <a href="#">item3_1</a>
                                        <a href="#">item3_2</a>
                                        <a href="#">item3_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td class="main">MENU4</td></tr>
                        <tr><td>
                                <div class="m4">
                                        <a href="#">item4_1</a>
                                        <a href="#">item4_2</a>
                                        <a href="#">item4_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
</div>
</body>
</html>

作者: moyixiu   发布时间: 2010-09-07

复制内容到剪贴板
代码:
<!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=utf-8" />
<title>几种纯css菜单-http://www.heartonline.com.cn/blog/article.asp?id=326</title>
<style type="text/css">
/* the all */
body {font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:30px;}
table {border-collapse:collapse;}
td {padding:0;}
/* the first */
#nav1 {width:500px; margin-bottom:50px;}
        #nav1 a {display:block; padding-left:33px; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; margin-bottom:1px;}
        #nav1 a:hover {background:#ff0; color:#2c3d43;}
        #nav1 a div {display:none; padding-left:20px;}
        #nav1 a:hover div {display:block;}
        #nav1 a div a {display:inline; padding:0 10px; color:#595D66; background:transparent;}
        #nav1 a div a:hover {color:#000; text-decoration:underline;}
        
/* the second */
#nav2 {width:200px; margin-bottom:50px;}
        #nav2 a {display:block; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; margin-bottom:1px;}
        #nav2 a:hover {background:#2c3d44;}
        #nav2 table {width:100%;}
        #nav2 a div {display:none;}
        #nav2 a:hover div {display:block;}
        #nav2 a div a {display:block; width:100%; padding:0 20px; color:#595D66; background:#DCE7ED;}
        #nav2 a div a:hover {color:#000; background:#A6C4CE;}
/* the third */
#nav3 {width:120px; margin-bottom:50px;}
        #nav3 a {display:block; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; margin-bottom:1px;}
        #nav3 a:hover {background:#DCE7ED; color:#000;}
        #nav3 table {width:100%;}
        #nav3 td.main {padding-left:20px;}
        #nav3 a div {display:none;}
        #nav3 a:hover div {display:block; position:absolute; top:318px; left:150px;}
        #nav3 a div a {display:block; width:100%; padding:1px 20px; color:#595D66; background:#DCE7ED; margin-bottom:0px;}
        #nav3 a div a:hover {color:#000; background:#A6C4CE;}
/* the fourth */
#nav4 {width:400px; margin-bottom:50px;}
        #nav4 a {display:block; width:100px; float:left; line-height:22px; text-decoration:none; background:#2C3D43; color:#DDE4EA; border-bottom:1px solid #fff;}
        #nav4 a:hover {background:#2c3d44;}
        #nav4 table {width:100px;}
        #nav4 td.main {text-align:center;}
        #nav4 a div {display:none;}
        #nav4 a:hover div.m1 {display:block; position:absolute; top:488px; left:30px;}
        #nav4 a:hover div.m2 {display:block; position:absolute; top:488px; left:130px;}
        #nav4 a:hover div.m3 {display:block; position:absolute; top:488px; left:230px;}
        #nav4 a:hover div.m4 {display:block; position:absolute; top:488px; left:330px;}
        #nav4 a div a {width:100px; text-indent:20px; color:#595D66; background:#0cc;}
        #nav4 a div a:hover {color:#000; background:#A6C4CE;}
        
</style>
</head>
<body>
<a href="http://www.google.com.hk/custom?q=CSS%E8%8F%9C%E5%8D%95&sitesearch=www.heartonline.com.cn" target="_blank">点击浏览更多CSS菜单效果</a><br /><br />
<!--the first-->
<div id="nav1">
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU1</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU2</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU3</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr>
                                <td class="main">MENU4</td>
                                <td><div><a href="#">item1</a> | <a href="#">item2</a> | <a href="#">item3</a> | <a href="#">item4</a></div></td>
                        </tr>
                </table>
        </a>
</div>
<!--the second-->
<div id="nav2">
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU1</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU2</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU3</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU4</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1</a>
                                        <a href="#">item2</a>
                                        <a href="#">item3</a>
                                        <a href="#">item4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
</div>
<!--the third-->
<div id="nav3">
        <a href="#">
                <table>
                        <tr><td class="main">MENU1</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item1_1</a>
                                        <a href="#">item1_2</a>
                                        <a href="#">item1_3</a>
                                        <a href="#">item1_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU2</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item2_1</a>
                                        <a href="#">item2_2</a>
                                        <a href="#">item2_3</a>
                                        <a href="#">item2_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU3</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item3_1</a>
                                        <a href="#">item3_2</a>
                                        <a href="#">item3_3</a>
                                        <a href="#">item3_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td style="padding-left:20px;">MENU4</td></tr>
                        <tr><td>
                                <div>
                                        <a href="#">item4_1</a>
                                        <a href="#">item4_2</a>
                                        <a href="#">item4_3</a>
                                        <a href="#">item4_4</a>
                                </div>
                        </td></tr>
                </table>
        </a>
</div>
<!-- the fourth -->
<div id="nav4">
        <a href="#">
                <table>
                        <tr><td class="main">MENU1</td></tr>
                        <tr><td>
                                <div class="m1">
                                        <a href="#">item1_1</a>
                                        <a href="#">item1_2</a>
                                        <a href="#">item1_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td class="main">MENU2</td></tr>
                        <tr><td>
                                <div class="m2">
                                        <a href="#">item2_1</a>
                                        <a href="#">item2_2</a>
                                        <a href="#">item2_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td class="main">MENU3</td></tr>
                        <tr><td>
                                <div class="m3">
                                        <a href="#">item3_1</a>
                                        <a href="#">item3_2</a>
                                        <a href="#">item3_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
        <a href="#">
                <table>
                        <tr><td class="main">MENU4</td></tr>
                        <tr><td>
                                <div class="m4">
                                        <a href="#">item4_1</a>
                                        <a href="#">item4_2</a>
                                        <a href="#">item4_3</a>
                                </div>
                        </td></tr>
                </table>
        </a>
</div>
</body>
</html>

作者: moyixiu   发布时间: 2010-09-07

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net