CSS实现鼠标悬浮无限向下级展示的简单代码
*{
margin:;
padding:;
}
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:;
}
.ui-slide-item:hover > .ui-slide-box{
display: block;
}
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">aaaaaaaaaaaaa</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">aaaaaaaaaaaa</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">dddddddd </span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">sssssssssssss</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">eeeeeeeeeeee</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">ccccccccccccc</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">aaaaaaaaaaaaa</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">aaaaaaaaaaaa</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">dddddddd </span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">sssssssssssss</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">eeeeeeeeeeee</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">ccccccccccccc</span>
</li>
</ul>
</li> <li class="ui-slide-item">
<span class="ui-slide-item-text">bbbbbbbbbb</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">sfsdfsdfsd </span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">cvwdfsd</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">ewewewe</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">xxcxc</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li> <li class="ui-slide-item">
<span class="ui-slide-item-text">bbbbbbbbbb</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">sfsdfsdfsd </span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">cvwdfsd</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">ewewewe</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">xxcxc</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">bbbbbbbbbbb</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">aaaaaaaaaaaa</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">dddddddd </span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">sssssssssssss</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">eeeeeeeeeeee</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">ccccccccccccc</span>
</li>
</ul>
</li>
</ul>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">cccccccccccccccccc</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">rrrrrrrrrrrrrrrrrrrrrrrrrr</span>
<ul class="ui-slide-box">
<li class="ui-slide-item">
<span class="ui-slide-item-text">dddddddd </span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">sssssssssssss</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">eeeeeeeeeeee</span>
</li>
<li class="ui-slide-item">
<span class="ui-slide-item-text">ccccccccccccc</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS实现鼠标悬浮无限向下级展示的简单代码的更多相关文章
- css实现鼠标悬浮字体流光背景模糊效果
原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...
- css实现鼠标悬浮后的提示效果
一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- 自定义jq插件，鼠标悬浮展示图片或者视频放大图，可自定义展示内容
网站项目经常会遇到一些视频或者图片素材的展示功能,那么就需要自己写一个功能,就是在一些列表页面你想要是这个数据的详细内容,弹框在页面某个位置 例如这是视频悬浮展示效果,可自定义自动播放等属性标签 又例 ...
- CSS/JS图片鼠标悬浮一道光闪过
看到有些网站logo鼠标悬浮上面的时候,会出现一道光,一闪而过,刚开始以为是gif图,已审查, 居然不是:现在就实现在这种效果: 先看看CSS实现的效果图: 看到没,就是这道刺眼的白光.... 啊 ...
- CSS快速入门-鼠标悬浮(hover伪类)
一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...
- 鼠标悬浮上去显示小手CSS
鼠标悬浮上去显示小手CSS只需要添加一句css代码即可 cursor:pointer;
- CSS鼠标悬浮DIV后显示DIV外的按钮
昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
随机推荐
- golang 版本 gearman 试用
g2 是golang 版的gearman 实现,包含了server (支持leveldb,以及metrics).client 代码.worker 代码 使用上还是很方便的,同时部署也比较简单,结合do ...
- python之路---04 列表 元组
十七 .列表 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 1.列表存在索引和切片. 和字符串是一样的. 2.增删改查操作 1).增加 1. .append(&quo ...
- Delphi 初始化的顺序
一.存储结构: 初始化单元存储在一个数组InitContext.InitTable^.UnitInfo中,其中UnitInfo是以数组的方式存储的,其中InitTable的定义为: 其中InitTab ...
- Springboot技术点汇总
1. Springboot+MyBatis+druid 在启动类上面,添加注释@Configuration以及@ImportResource(location={"classpath:con ...
- java 反射创建实例与new创建实例的区别
new创建实例 new创建一个编译时已知的类的实例,也即是静态的创建实例: 可以调用类的任何构造器来创建实例: 速度更快,由于可以将需要的类写入字节文件中(hardcoded into the byt ...
- ORACLE SQL Developer日期显示格式不全
如下图,只有月-日-年,不能完整显示小时,分,秒 解决方法: 工具->首选项->数据库->NLS->日期格式: DD-MON-RR 修改为: YYYY-MM-DD HH24:M ...
- Ribbon 使用入门
Ribbon 是 Netflix 下的负载均衡项目,在集群中为各个客户端的通信提供支持,主要实现中间层应用程序的负载均衡,提供以下特性: 负载均衡器,可支持插拔式的负载均衡规则 对多种协议提供支持,例 ...
- SPI 核的寄存器空间
SPI 核的寄存器空间 寄存器的地址与定义: 寄存器描述与配置: 复位寄存器: 控制寄存器: 状态寄存器: 数据发送寄存器: 在使用DTR之前,一定要经过复位处理. 对于DTR的操作中,首先写入com ...
- kali 安装qq
使用的是longene TM2013 下载地址(百度云):http://pan.baidu.com/s/1dFx8azv 安装: 64位的需要安装32位依赖文件 用这条命令 apt-get insta ...
- 黄聪：ffmpeg参数说明（转载）
ffmpeg.exe -i F:\闪客之家\闪客之歌.mp3 -ab 56 -ar 22050 -b 500 -r 15 -s 320x240 f:\11.flv ffmpeg -i F:\01.wm ...