效果预览

以下为源码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<style>

*{

    padding:0;

    margin:0

}

.menu>li{

    float:left;

    width:80px;

    background:#0ff;

    list-style:none;

    text-align: center;

}

.menu>li:hover .hiddenlist{

    height:100px;

}

.menu>li:hover{

    background:#707;

}

.hiddenlist{

    position:fixed;

    height:0;

    overflow:hidden;

    background:#999;

    transition:height 0.5s ;

}

.hiddenlist ul{

    position:relative;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:80px;

}

.hiddenlist ul li{

    text-align:center;

}

.hiddenlist li:hover {

    background:#7fff;

}

@keyframes move{

    0% {height: 0 }

    100% {height: 120px}

}

</style>

<body>

<div class="nav">

    <ul class="menu">

        <li>一

            <div class="hiddenlist">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </li>

        <li>二

            <div class="hiddenlist">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </li>

        <li>三

            <div class="hiddenlist">

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </li>

    </ul>

</div>

<div style="clear:both;">因为hidden的position属性为fixed，所以不会影响布局</div>

</body>

</html>

纯CSS实现展开列表的更多相关文章

  1. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

  2. 【纯css】左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度。支持不规则图片。

    查看演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  3. 使用纯CSS制作展开合并立方体特效

    显示效果 源码 <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  4. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  5. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  6. [TimLinux] CSS 纯CSS实现动画展开/收起功能

    内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...

  7. 纯css实现手机通讯录

    我们经常在手机上看到通讯录列表,这类布局一般有两个显著的效果 首字母吸顶 快速定位 下面我们来实现一下 页面结构 这里页面结构很简单,就是两个列表 <div class="con&qu ...

  8. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

随机推荐

  1. Left-pad

    L1-032 Left-pad (20 分)   根据新浪微博上的消息,有一位开发者不满NPM(Node Package Manager)的做法,收回了自己的开源代码,其中包括一个叫left-pad的 ...

  2. epoll函数

    函数epoll 1. 函数epoll_creat: 该函数生成一个epoll专用的文件描述符 int epoll_creae(int size); 分析: size:epoll上能关注的最大描述符数 ...

  3. 常用js正则表达式大全

    常用js正则表达式大全.一.校验数字的js正则表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和 ...

  4. Zookeeper（一）CentOS7.5搭建Zookeeper3.4.12集群与命令行操作

    一. 分布式安装部署 1.0 下载地址 官网首页: https://zookeeper.apache.org/ 下载地址: http://mirror.bit.edu.cn/apache/zookee ...

  5. Jhipster Registry（Eureka Server） Docker双向联通与高可用部署

    使用Compose来编排这个Eureka Server集群: peer1配置: server: port: 8761 eureka: instance: hostname: eureka-peer-1 ...

  6. php第二天 开始连接数据库

    php连接数据库有三种方法,分别是mysqli面向对象,mysqli面向过程,pdo. 1.查了资料,最终选择则了mysqli面向过程的方式,运行效率应该要高一些. 代码如下 <?php $se ...

  7. windows下安装Memcached服务器,PHP的memcache扩展

    Memcahed 介绍:Memcahed是一个内存缓存服务器 (类似MySQL服务器) 作用:提高web的响应速度,例如缓存数据库查询结果 原理:把数据存到内存中 (提高速度的原因) 教程相关 系统: ...

  8. 005 使用SpringMVC开发restful API三--处理创建请求

    一:主要任务 1.说明 @RequestBody 映射请求体到java方法的参数 日期类型参数的处理 @Valid注解 BindingResult验证请求参数的合法性并处理校验结果 二:@Reques ...

  9. Java版统计文件中的每个单词出现次数

    正则表达式之Pattern和Matcher,请参见转载博客    http://www.cnblogs.com/haodawang/p/5967219.html 代码实现: import java.i ...

  10. centos6.9安装mysql5.7.18

    详细记录在CentOS 6.9上安装MySQL 5.7.18 过程,希望对大家有所帮助. 下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysq ...