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

css html float 可折叠菜单

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

HTML代码:

  1.  

登录后复制登录后复制测试测试1测试测试测试测试1测试测试测试测试1测试测试

CSS在下面:

  1. 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测试测试测试测试1测试测试
这样你再设置CSS就会生效了,不会重叠了

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    div背景图片和输入框的冲突问题_html/css_WEB-ITnose

    2025-3-28 11:08:03

    编程技术

    请教一下前端工程师_html/css_WEB-ITnose

    2025-3-28 11:08:11

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索