引导思路：

　　　　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的示例；

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.      body{
  8.          width: 1024px;
  9.          height: 500px;
  10.      }
  11.      .all{
  12.          width:100%;
  13.          height: 200px;
  14.  
  15.      }
  16.      .head{
  17.          width: 600px;
  18.          height: 100px;
  19.          background-color: green;
  20.  
  21.      }
  22.      .head_wei{
  23.          width: 100px;
  24.          height: 100%;
  25.          background-color: pink;
  26.          position: relative;
  27.  
  28.      }
  29.      /*对你下拉外的div进行设置*/
  30.      .head_wei:hover{
  31.          z-index: 2;
  32.      }
  33.      .xiala{
  34.          width: 150px;
  35.          height: 180px;
  36.          background-color: pink;
  37.          position: relative;
  38.          top:100px;
  39.          z-index: -2;
  40.      }
  41.  
  42.      .hand{
  43.          width: 600px;
  44.          height: 200px;
  45.          background-color: gold;
  46.          z-index: 4;
  47.      }
  48.      </style>
  49.  </head>
  50.  <body>
  51.      <div class="all">
  52.          <div class="head">
  53.              <div class="head_wei">
  54.                  <div class="xiala"></div>
  55.              </div>
  56.          </div>
  57.          <div class="hand"></div>
  58.      </div>
  59.  </body>
  60.  </html>

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.      body{
  8.          width: 1024px;
  9.          height: 500px;
  10.      }
  11.      .all{
  12.          width:100%;
  13.          height: 200px;
  14.  
  15.      }
  16.      .head{
  17.          width: 600px;
  18.          height: 100px;
  19.          background-color: green;
  20.  
  21.      }
  22.      .head_wei{
  23.          width: 100px;
  24.          height: 100%;
  25.          background-color: pink;
  26.          position: relative;
  27.          overflow: hidden;
  28.  
  29.      }
  30.      /*对你下拉外的div进行设置*/
  31.      .head_wei:hover{
  32.          overflow: visible;
  33.      }
  34.      .xiala{
  35.          width: 150px;
  36.          height: 180px;
  37.          background-color: pink;
  38.          position: relative;
  39.          top:100px;
  40.          /*z-index: -2;*/
  41.      }
  42.  
  43.      .hand{
  44.          width: 600px;
  45.          height: 200px;
  46.          background-color: gold;
  47.          /*z-index: 4;*/
  48.      }
  49.      </style>
  50.  </head>
  51.  <body>
  52.      <div class="all">
  53.          <div class="head">
  54.              <div class="head_wei">
  55.                  <div class="xiala"></div>
  56.              </div>
  57.          </div>
  58.          <div class="hand"></div>
  59.      </div>
  60.  </body>
  61.  </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. css滤镜模糊效果filter和backdrop-filter

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. iDempiere 使用指南 绿色版一键启动测试环境

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  3. iOS内存泄露统计

    1.Value stored to 'xxx' during its initialization is never read // 对象声明之后根本就没有使用 只有赋值 2.Value stored ...

  4. Latest SoC

    From: http://laoyaoba.com/ss6/html/68/n-505768.html 2014年国产ARM SoC芯片巡礼(上) 关注“集微网”,微信点播新闻.随要随有 来源: &l ...

  5. Windows平台字符串完全指南

    The Complete Guide to C++ Strings : The Complete Guide to C++ Strings, Part I - Win32 Character Enco ...

  6. Python对数组的基本操作

    # coding=utf-8创建并打印数组'''arr = ["aex", "bfe", "mpilgrim", "zddd&qu ...

  7. mysql便于管理的几个shell脚本

    [mysql@clark scripts]$ lsmysql_db_shutdown.sh  mysql_db_startup.sh  mysql_env.ini  mysqlplus.sh[mysq ...

  8. Gym Gym 101147G 第二类斯特林数

    题目链接:http://codeforces.com/gym/101147/problem/G 题意:n个人,去参加k个游戏,k个游戏必须非空,有多少种放法? 分析: 第二类斯特林数,划分好k个集合后 ...

  9. PHP设计模式——桥接模式

    <?php /* * 桥接模式 * 使用发送器,将一个类对象传入另一个类作为属性,耦合M+N个类 * */ abstract class Info { protected $_send = NU ...

  10. 更改win7关机菜单选项功能

    说明:如果你不希望别人对你的电脑进行注销切换等操,那么可以使用如下的方法 实现效果:          实现步骤: 效果1 1>切换用户: 2>注销:(需重启资源管理器生效) 效果2: