京东的左侧导航。如果用纯css如何做出子菜单成为一个整体的效果。如图。

2024-12-20 09:24:10
推荐回答(3个)
回答1:

用 a:hover span 试试,如果你 css 非常熟,能处理好很多细节问题,有可能能行,不断的嵌套 a:hover span ,下面这个如果你看得明白的话可以试试:




  • 家用电器

    生活电器


    核心就是一个链接里面放一个span,然后这个span里面又放二级菜单的链接:
    一级菜单
      二级菜单


    然后先把 span 用 display:none; 隐藏起来,当一级菜单的链接发生 a:hover 时,又把 span 的 display 设置为 block 使其可见。

    纯 css 不上 js 并且:不用表格、条件注释的话,那上面我说的这些就是唯一的办法了。

    另一种可能是:上面我说的这些根本做不到你想要的效果,因为我也没试过这么复杂的嵌套会出现什么预料之外的东西要处理,考虑各浏览器兼容问题,能否处理掉这些问题是未知的。

    你至少需要解决:
    IE6 下 a:hover span 无效(要让其生效需要设置一个多余的空背景,方法自行百度)
    各种 z-index 问题
    span 的复杂定位
    其他莫名其妙的问题
    ...

    最终结果一切未知,有兴趣的话可以自己试着写代码。

回答2:




    导航一


  • 这里放你展开的图什么的


    导航二


  • 这里放啥都行


    导航三


  • 这里也是,随便放



回答3:

ie6不支持a以外的标签用:hover哦,