#classify ul li div{width:100px;  height:200px;  display:none;  position:absolute;  left:100px;  top:0px;}
    
#classify ul li:hover div {  display:block;}

 

主要用到的CSS代码就是上面用的这两个CSS了
  1. display 的功能就是显示,  none 的时候就不会显示出来, 默认值为 inline 就是接着显示在下面
  2. display 的属性值为 block ; 表示是一个块来显示, 一个元素会换行一次, 这里当然不用这个也可以,我们需要的只是把div 显示出来而已, 用inline 也是可以的
  3. 还有一个重要的元素就是 position ,这个就是位置的排版 ,这里是用绝对位置 , 就是用width , height , top , left , right 来控制这个二级目录的位置 .

然后就没有了,这个其实比较容易 , 没有涉及到js , 能够比较简单的实现了 , 当然效果也是不赖 , 还有就是很多网站都是必须要用到这个的

HTML如何创建二级目录的更多相关文章

  1. 利用php函数mkdir递归创建层级目录

    项目开发中免不了要在服务器上创建文件夹,比如上传图片时的目录,模板解析时的目录等.这不当前手下的项目就用到了这个,于是总结了几个循环创建层级目录的方法. php默认的mkdir一次只能创建一层目录,而 ...

  2. 通过phoenix在hbase上创建二级索引,Secondary Indexing

    环境描述: 操作系统版本:CentOS release 6.5 (Final) 内核版本:2.6.32-431.el6.x86_64 phoenix版本:phoenix-4.10.0 hbase版本: ...

  3. Yii2中如何访问controller的二级目录下的控制器

    Yii2默认的控制器下只有一层目录放在controller目录下,当开发的需要的时候需要在该目录下面新增一层目录也就是在controller下增加二级目录,比如controller/api/Membe ...

  4. 带二级目录的Nginx配置------目前找到的最简单的方法

    由于项目不知一个,所以不得不为每一个项目建一个专有的文件夹,这就导致了在配置nginx的时候会出现二级目录 目前找到的最简单的方法     - step1:修改 vue.config.js   添加配 ...

  5. Phoneix(三)HBase集成Phoenix创建二级索引

    一.Hbase集成Phoneix 1.下载 在官网http://www.apache.org/dyn/closer.lua/phoenix/中选择提供的镜像站点中下载与安装的HBase版本对应的版本. ...

  6. thinkphp 3.2 linux二级目录安装

    详解:http://document.thinkphp.cn/manual_3_2.html#url_rewrite 注意:linux系统对大小写敏感 服务器系统:linux (阿里云服务器) thi ...

  7. MFC 创建多层目录

    创建多层目录 BOOL CTestToolCtr::CreateFolder(CString strNewFolder) { /************************************ ...

  8. php使用递归创建多级目录

    <?php header('Content-type:text/html;charset=utf8'); echo "Loading time:".date('Y-m-d H ...

  9. PHP判断文件夹是否存在和创建文件夹的方法(递归创建多级目录)

    在开始之前,我先说明一下,可能许多朋友与我一样认为只要给一个路径,mkdir就可以创建文件夹,其实不是那样,单个的MKDIR只能创建一级目录,对于多级的就不行了,那如何用mkdir来创建呢?先我抄一段 ...

随机推荐

  1. Codeforces 864E dp

    题意: 房间着火了,里面有n件物品,每件物品有营救需要的时间t,被烧坏的最晚时间d,他的价值p,问能得到的最大价值,并且输出营救出来的物品编号 代码: //必然是先救存活时间短的即d小的,所以先排个序 ...

  2. javaFX8初探(环境搭建)

    1:下载java8  Oracle官网2:下载eclipse4.4 eclipse官网3:安装e(fx)clipse插件 http://download.eclipse.org/efxclipse/u ...

  3. 即时通信系统Openfire分析之一:Openfire与XMPP协议

     引言 目前互联网产品使用的即时通信协议有这几种:即时信息和空间协议(IMPP).空间和即时信息协议(PRIM).针对即时通讯和空间平衡扩充的进程开始协议SIP(SIMPLE)以及XMPP.PRIM与 ...

  4. 贪心+离散化+线段树上二分。。。 Samara University ACM ICPC 2016-2017 Quarterfinal Qualification Contest G. Of Zorcs and Axes

    题目链接:http://codeforces.com/gym/101149/problem/G 题目大意:给你n对数字,为(a[i], b[i]),给你m对数字,为(w[i], c[i]).给n对数字 ...

  5. Assert 的用法

    Assert Assert是断言的意思,头文件为assert.h, assert是一个宏 功 能: 测试一个条件并可能使程序终止 用 法: void assert(int test); 在单元测试中经 ...

  6. [php]php错误处理机制

    1.判断文件是否存在,file_exists("文件名") or die("no such file");2.set_error_hanlder("错 ...

  7. 【LibreOJ】#6259. 「CodePlus 2017 12 月赛」白金元首与独舞

    [题目]给定n行m列的矩阵,每个位置有一个指示方向(上下左右)或没有指示方向(任意选择),要求给未定格(没有指示方向的位置)确定方向,使得从任意一个开始走都可以都出矩阵,求方案数.n,m<=20 ...

  8. 【CodeForces】704 C. Black Widow 动态规划+模拟

    [题目]C. Black Widow [题意]给定一个表达式,形式为(...)^(...)^......^(...)=1(n个括号),括号中为1~2个值取或.有m个变量,给出表达式的值为xi或 !xi ...

  9. Html5学习4

    1.Html5  Web储存 概念:使用HTML5可以在本地存储用户的浏览数据.早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些 ...

  10. 【洛谷P1597】语句解析

    题目背景 木有背景…… 题目描述 一串(<255)PASCAL语言,只有a,b,c 3个变量,而且只有赋值语句,赋值只能是一个一位的数字或一个变量,未赋值的变量值为0.输出a,b,c 最终的值. ...