引导思路：

　　　　1.需要用到的元素：position　　hover　　(z-index)  或（overflow）或（display）等等。

　　　　　关键点就是div的溢出部分的处理。

　　　　2.实现过程：

　　　　　　　　2.1：就是要把你需要做的菜单的div，放在你触碰的那个div中

　　　　　　　　2.2：给一个定位，让他到外面去（注意两个div之间要衔接起来）

　　　　　　　　2.3：在你触碰的div设置具体的值（比如说，一开始（菜单div）的z-index是负数，当年触碰时(触碰div)z-index值变大）

　　　　　　　　　　　　　　　　　　　　　　　　　　如果要用z-index就需要注意poistion这个属性值。

　　　　

下面是z-index的示例；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

     body{

         width: 1024px;

         height: 500px;

     }

     .all{

         width:100%;

         height: 200px;

     }

     .head{

         width: 600px;

         height: 100px;

         background-color: green;

     }

     .head_wei{

         width: 100px;

         height: 100%;

         background-color: pink;

         position: relative;

     }

     /*对你下拉外的div进行设置*/

     .head_wei:hover{

         z-index: 2;

     }

     .xiala{

         width: 150px;

         height: 180px;

         background-color: pink;

         position: relative;

         top:100px;

         z-index: -2;

     }

     .hand{

         width: 600px;

         height: 200px;

         background-color: gold;

         z-index: 4;

     }

     </style>

 </head>

 <body>

     <div class="all">

         <div class="head">

             <div class="head_wei">

                 <div class="xiala"></div>

             </div>

         </div>

         <div class="hand"></div>

     </div>

 </body>

 </html>

下面就是over-flow的示例(更上面的一样就是将z-index换成over-flow)：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

     body{

         width: 1024px;

         height: 500px;

     }

     .all{

         width:100%;

         height: 200px;

     }

     .head{

         width: 600px;

         height: 100px;

         background-color: green;

     }

     .head_wei{

         width: 100px;

         height: 100%;

         background-color: pink;

         position: relative;

         overflow: hidden;

     }

     /*对你下拉外的div进行设置*/

     .head_wei:hover{

         overflow: visible;

     }

     .xiala{

         width: 150px;

         height: 180px;

         background-color: pink;

         position: relative;

         top:100px;

         /*z-index: -2;*/

     }

     .hand{

         width: 600px;

         height: 200px;

         background-color: gold;

         /*z-index: 4;*/

     }

     </style>

 </head>

 <body>

     <div class="all">

         <div class="head">

             <div class="head_wei">

                 <div class="xiala"></div>

             </div>

         </div>

         <div class="hand"></div>

     </div>

 </body>

 </html>

　　

css实现下拉菜单功能（多中实现方式即原理）的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  3. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

  4. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  5. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

  6. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  7. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  8. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  9. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

随机推荐

  1. Java开发中代码规范有哪些？

    Java开发中所要遵守的编码规范大体上有如下7点.命名规范.注释规范.缩进排版规范.文件名规范.声明规范.语句规范以及编程规范. 1.命名规范 (1)所有的标示符都只能用ASCⅡ字母(A-Z或a-z) ...

  2. ASP.NET MVC 音乐商店 - 5 通过支架创建编辑表单 续

    查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 首先,在控制器中包含了标准的 MVC 控制器的代码,为了使用 ...

  3. Android—PopupWindow的简单使用

    PopupWindow 是一个可以显示在当前 Activity 之上的浮动容器,这个Demo要实现的功能是,点击布局中的两个按钮,进而控制PopupWindow的显示与消失,代码中有详细的注释首先看一 ...

  4. 使用本地计划任务定时关闭azure虚拟机

    本文包含以下内容 前提条件 如何实现定时关闭虚拟机 前提条件 Controller 机器上必须安装 Azure PowerShell,并且要在 PowerShell 里登录一次 Azure, 请参见: ...

  5. android Handler、Thread和Runnable

    android里面的创建的Handler对象并不是新建一个新的线程,而是在主线程执行,主线程的消息队列中循环. java中实现一个线程有两种方法,一种是继承Thread类,一种是实现Runnable接 ...

  6. day013-流

    1. 常用函数式接口 1.1 Predicate接口 有时候我们需要对某种的数据进行判断,从而得到一个boolean值结果.这时可以使用java.util.function.Predicate< ...

  7. github的初步认识

    第一部分:我用代码写了一个简单的可以运行的helloworld代码. 其链接为:https://github.com/ljw305503/CK01.git 第二部分:GitHub是一个分布式的版本控制 ...

  8. Python语言程序设计基础（4）—— 程序的控制结构

    PM2.5 pm = eval(input()) if pm>=75: print("空气存在污染") else : print("空气没有污染") pr ...

  9. 动态规划(DP),类似LIS,FatMouse's Speed

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1108 解题报告: 1.首先按照weight从小到大排列,weig ...

  10. Python的基本库与第三方库

    一:Python 模块,包,库的概念理解: 1.python模块是: python模块:包含并且有组织的代码片段为模块. 表现形式为:写的代码保存为文件.这个文件就是一个模块.sample.py 其中 ...