Fork me on GitHub

css实现下拉菜单功能（多中实现方式即原理）

引导思路：

　　　　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>

 

 

　　

posted @ 2017-02-17 23:32  ChangeSub  阅读(416)  评论(0)  编辑  收藏  举报