首页 > 网页制作 > CSS

CSS实现鼠标悬浮无限向下级展示的实例代码

admin CSS 2022-02-06 13:12:12 css   悬浮鼠标   css   下级展示"

废话不多说了,直接大家贴代码了,具体代码如下所示;

*{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: none;
            }
            .ui-slide-box{
                width: 300px;
            }
            .ui-slide-item{
                width: 100%;
                position: relative;
            }
            .ui-slide-item-text{
                display: block;
                background-color: #000000;
                color: white;
                border-bottom: 1px solid yellow;
                height: 40px;
                line-height: 40px;
            }
            .ui-slide-item .ui-slide-box{
                display: none;
                position: absolute;
                left: 300px;
                top: 0;
            }
            .ui-slide-item:hover > .ui-slide-box{
                display: block;
            }
  • aaaaaaaaaaaaa
    • aaaaaaaaaaaa
      • dddddddd
      • sssssssssssss
      • eeeeeeeeeeee
      • ccccccccccccc
        • aaaaaaaaaaaaa
          • aaaaaaaaaaaa
            • dddddddd
            • sssssssssssss
            • eeeeeeeeeeee
            • ccccccccccccc
          • bbbbbbbbbb
            • sfsdfsdfsd
            • cvwdfsd
            • ewewewe
            • xxcxc
    • bbbbbbbbbb
      • sfsdfsdfsd
      • cvwdfsd
      • ewewewe
      • xxcxc
  • bbbbbbbbbbb
    • aaaaaaaaaaaa
      • dddddddd
      • sssssssssssss
      • eeeeeeeeeeee
      • ccccccccccccc
  • cccccccccccccccccc
    • rrrrrrrrrrrrrrrrrrrrrrrrrr
      • dddddddd
      • sssssssssssss
      • eeeeeeeeeeee
      • ccccccccccccc

总结

以上所述是小编给大家介绍的CSS实现鼠标悬浮无限向下级展示的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对潘少俊衡网站的支持!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/76706.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持