#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. UVA-11582 数学

    UVA-11582 题意: 求f[a^b]%n ,其中f是斐波那契数列,1<=n<=1000,0<=a,b<=2^64; 代码: //这题重点是要发现 f[i]%n会出现循环, ...

  2. HDU 6034 贪心

    Balala Power! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  3. 1.UiDevice API 详细介绍

    1.UiDevice按键与keycode使用 返回值 方法名 说明 boolean pressBack() 模拟短按返回back键 boolean pressDPadCenter() 模拟按轨迹球中点 ...

  4. 2-sat 分类讨论 UVALIVE 3713

    蓝书326 //看看会不会爆int!数组会不会少了一维! //取物问题一定要小心先手胜利的条件 #include <bits/stdc++.h> using namespace std; ...

  5. Calf Flac

    1.3.3 Calf Flac Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 223  Solved: 42[Submit][Status][Forum] ...

  6. python初步学习-面向对象之类(一)

    python 面向对象 python 从设计之初就已经是一门面向对象的语言,正因为如此,在python中创建一个类和对象是很容易的. 对象对象奇数简介 类(Class): 用于描述具有相同的属性和方法 ...

  7. localStorage H5本地存储

    域内安全.永久保存.即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立. <!doctype html&g ...

  8. 深入理解Spring系列之十一:SpringMVC-@RequestBody接收json数据报415

    转载 https://mp.weixin.qq.com/s/beRttZyxM3IBJJSXsLzh5g 问题原因 报错原因可能有两种情况: 请求头中没有设置Content-Type参数,或Conte ...

  9. JSON.parse()——json字符串转JS

    JSON 通常用于与服务端交换数据. 在接收服务器数据时一般是字符串. 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象. 语法 JSON.parse(text[, ...

  10. 29、最小的K个数

    一.题目 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 二.解法 import java.util.ArrayList; ...