引导思路：
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>