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"> ...
随机推荐
- 收集的dubbo博客
1.http://shiyanjun.cn/archives/category/opensource/dubbo 2.https://blog.csdn.net/hellozpc/article/de ...
- SCS Characteristics
Each SCS is an autonomous web application. For the SCS's domain, all data, the logic to process that ...
- 普林斯顿数学指南(第二卷) (Timothy Gowers 著)
第IV部分 数学的各个分支 IV.1 代数数 IV.2 解析数论 IV.3 计算数论 IV.4 代数几何 IV.5 算术几何 IV.6 代数拓扑 IV.7 微分拓扑 IV.8 模空间 IV.9 表示理 ...
- 模拟实现strncpy,strncat,strncmp
1.模拟实现strncpy <1.>strncpy相比于strcpy增加了size_t参数可以实现最多拷贝的字节数<2.>(size_t不可以超出拷贝存放的内存大小)来保证不 ...
- flutter 控制台快捷键
- js将网址转为二维码并下载图片
将一个网址转为二维码, 下面可以添加文字, 还提供下载功能 利用的是 GitHub上面的qrcode.js 和canvas <!DOCTYPE html> <html> < ...
- kafka 中的术语
出处:https://tech.meituan.com/2015/01/13/kafka-fs-design-theory.html table th:first-of-type { width: 7 ...
- Typescript学习总结之接口
接口 用来建立某种代码约定,使得其他开发者在调用某个方法或者创建新的类时必须遵守接口所定义的代码约定 1. 接口声明属性 interface IStudent { name: string; age: ...
- SQL 中的 IFNULL和NULLIF
sql 中的IFNULL和NULLIF很容易混淆,在此记录一下. IFNULL IFNULL(expression1, expression2) 如果expression1为null, 在函数返回ex ...
- Hive Shell 命令详解
Hive服务介绍 Hive默认提供的cli(shell)服务,如果需要启动其他服务,那么需要service参数来启动其他服务,比如thrift服务.metastore服务等.可以通过命令hive -- ...