Test /*Now the CSS*/ * {margin: 0; padding: 0;} .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child{ padding-top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px; } .tree li a{ border: 1px solid #ccc; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border-color: #94a0b4; } /*Thats all. I hope you enjoyed it. Thanks :)*/ Parent Grand Child Grand Child Grand Child Great Grand Child Great Grand Child Great Grand Child Grand Child Child Child
- 最新日志
- 热评日志
- 随机日志
- 贝尔I-120E-QT光猫Telnet、导出配置文件 、语音鉴权密码
- 解决Intel AC3160无线网卡 系统无法连接WIFI6路由器问题
- 萤石 Y5 POE版 CS-Y5-V100-8B4EKFL 系列连不上海康录像机解决办法
- pve查看网卡信息
- TPLINK POE摄像机尾插坏了解决办法
- 海康录像机怎样进入OSD配置?
- Navicat Premium v17.2.3绿色版
- MobaXterm 25.1 中文汉化版
- SQL数据库SA密码修改工具
- chrome 浏览器报 NET::ERR_CERT_COMMON_NAME_INVALID 解决办法
- Linux防火墙-iptables/firewalld的使用教程
- Linux开关机命令:shutdown,reboot,halt,init之间的区别
- 史上最全华为路由器交换机配置命令大合集
- 交换机基本配置命令
- 最新版本IDM
- 一键修复系统更新造成的打印机无法共享2023.06.15
- Android 9.0 网络权限的问题以及android:usesCleartextTraffic
- 解决银河麒麟系统开机后桌面无图标,只有下方开始菜单和任务栏可操作问题
- Win10安装打印机驱动程序失败提示“试图将驱动程序添加到存储区时遇到问题”解决方法
- 遥志代-理服务器CCProxy
- Mac安装Brew
- [DSVideo Go!]群晖TV DSvideo启动器,解决DSVideo安装后无启动图标问题 – Solution to the problem of no app icon after installation of Synology Android TV-DSvideo
- 解决MP3不能导入Flash的一种方法
- Centos7 ip地址修改的两种方式
- 好久没有写BLOG了,越来越感觉自己渺小了
- 随机生成IP
- 实现判断个人资料完成度的最简易方法
- 摆脱流氓 Adobe Flash Player 32.0.0.303 绿色特别版
- 锐捷交换机怎么开启光口 SPF
- Dreamweaver CS6 + retina
纯CSS打造的Family tree(族谱):等您坐沙发呢!