引导思路：

　　　　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. H5新特性-----type=file文件上传

    1.语法 单文件上传:<input type="file" id="file1"/> 多文件上传:<input type="file ...

  2. 网易回合制游戏录像批量下载（失效 不是因为代码 是因为网易官方关闭了录像网站 ：P）

    最近在访问网易大话西游2的录像专区时,发现页面还是很早之前的板式,网易的编辑并没有打算重新美化的打算,不由得内心一寒,结合之前好几个回合制游戏的倒闭,让很多人回顾都没办法回顾, 而且,很多人现在也没有 ...

  3. Locust性能测试3 no-web运行

    Locust也支持no-web的方式运行,直接通过控制台设置并发用户数.每秒启动用户数.持续压测时间. locust -f 脚本路径 -c 用户数 -r 每秒启动用户数 --run-time 持续压测 ...

  4. Codeforces Round #375 (Div. 2) D. Lakes in Berland （DFS或并查集）

    D. Lakes in Berland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. Apache轻量级性能測试工具－－ab

    Apache轻量级性能測试工具--ab ab早已不是什么新奇玩意,平时工作中会须要一些性能測试.简单的性能測试全然能够由AB来替代,而不须要动用LR这样重量级的工具. 此文简介一下ab的工具使用与结果 ...

  6. CFS调度分析(内核版本：2.6.34)

    CFS调度分析(内核版本:2.6.34) 1.时间记账 CFS不再有时间片的概念,他维护的是每个进程运行的时间记账 使用调度器实体结构来追踪进程运行记账: <linux/sched.h> ...

  7. 在文本框输入数据后，因为有历史记录，鼠标点或者敲回车这个历史记录时，请问会触发什么JS事件

    非ie触发 oninput事件,ie触发>onpropertychange事件 jquery写法 $("#input").bind("input propertyc ...

  8. [转]Qt中ui文件的使用

    用designer设计的*.ui文件可以通过uic工具转换为*.h文件(在编译时也会自动生成这样一个ui_*.h文件),有了这个.h文件就可以直接按照纯C++的方式对其中的类进行调用.ui文件的使用就 ...

  9. 【洛谷P2324】[SCOI2005]骑士精神

    骑士精神 题目链接 #include<iostream> #include<cstdio> using namespace std; int t,MAXD,sx,sy; ][] ...

  10. Python程序的执行原理（转）

    1. 过程概述 Python先把代码(.py文件)编译成字节码,交给字节码虚拟机,然后虚拟机一条一条执行字节码指令,从而完成程序的执行. 2. 字节码 字节码在Python虚拟机程序里对应的是PyCo ...