旁门左道通过JS与纯CSS实现显示隐藏层

想必大家在开发前端页面时，肯定少不了显示隐藏层这一技术点。那么我简单粗暴地总结了以下两个小demo.

要实现该截图的功能：鼠标移动到我的好友这个选项卡时，灰色的隐藏层就会出现。

1. 通过纯CSS实现。

该方法最简单，最粗暴。

这是部分HTML代码。

 1 <div class="myfriends" >
 2     我的好友
 3     <div class="myfriendsList" >
 4         <ul>
 5             <li><a href="">闺蜜</a></li>
 6             <li><a href="">同学</a></li>
 7             <li><a href="">创建分组</a></li>
 8         </ul>
 9     </div>
10 </div>

CSS代码部分（非关键部分已删除）

 1 .myfriends{
 2 
 3     overflow: hidden;
 4 
 5     position: relative;
 6 width: 90px;
 7 
 8 height: 30px;/*父元素的容器高30px*/
 9 
10 }
11 .myfriends:hover {
12 
13     overflow: visible;
14 
15 }
16 .myfriendsList {
17 
18     position: absolute;/**/
19 
20     width: 80px;
21 
22     height: 100px;
23 
24     top: 28px;/*子容器距离父容器一定要top<30*/
25 
26     left: 9px;
27 
28     z-index: 10;
29 
30 }

当你修改成以下样式时，

1 .myfriendsList { 
2 
3     top: 28px;/*子容器距离父容器一定要top<30*/
4 
5 }

就出现下面这张可图的效果，当然你鼠标离开时，隐藏层又消失，那么这样永远也无法点击隐藏层的菜单选项。

旁门左道通过JS与纯CSS实现显示隐藏层

那么，问题来了，我就时要做到截图的效果同时有能点击点击隐藏层的菜单选项应该怎么做呢？

我有个旁门左道的方法，放完整代码。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>发现</title>

    <style>

        .myfriends {

            overflow: hidden;

            position: relative;

            width: 130px;

            height: 30px; /*父元素的容器高30px*/

        }



        .myfriends:hover {

            overflow: visible;

        }



        .myfriendsList {

            position: absolute; /**/

            width: 80px;

            height: 140px; /*比原来的高多40px*/

            top: 40px; /*0<top<61 原因很简单，我用一个空白的容器为父容器和子容器左了衔接*/

            left: 9px;

            z-index: 10;

            border: solid 1px #c6c6c6;

            background-color: #f2f2f2;

        }



        .blank{display: block;

            left: 0;

            position: absolute;

            width: 100px;

            height: 30px;

            top: 30px;

        }

    </style>

</head>

<body>

<div class="myfriends">

    我的好友

    <span class="blank"></span>

    <div class="myfriendsList">

        <ul>

            <li><a href="">闺蜜</a></li>

            <li><a href="">同学</a></li>

            <li><a href="">创建分组</a></li>

        </ul>

    </div>

</div>

</body>

</html>

纯CSS