<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		 *{
            margin: 0px;
            padding: 0px;
        }
        div
        {
        	position: fixed;
        	right: 0px;
        	top: 50%;
        	transform: translateY(-50%);
        }
        ul
        {
        	list-style: none;
        	width: 50px;
        	height: 150px;
        	background: skyblue;
        	border-radius: 5px;
        }
       
        ul>li
        {
        	width: 50px;
        	height: 50px;
        	line-height: 50px;
        	text-align: center;
        	border-bottom: 1px solid #ccc;
        	color: #fff;
        	font-size: 20px;
        }
         ul>li:last-child{
            border-bottom: none;
        }
        .subMenu{
            width: 250px;
            height: 270px;
            padding: 20px;
            box-sizing: border-box;
            background: #ccc;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 60px;
            display: none;
        }
         .subMenu>img{
            width: 210px;
        }
	</style>
</head>
<body>
	<div>
	<ul>
		<li class="iconfont icon-qq"></li>
		<li class="iconfont icon-weixin" id="weixin"></li>
		<li class="iconfont icon-youjian"></li>
	</ul>
	<div class="subMenu">
		<p>微信二维码</p>
		  <img src="images/qrcode.png" alt="">
	</div>
</div>
<script type="text/javascript">
	let weixin = document.querySelector("#weixin");
    let subMenu = document.querySelector(".subMenu");
    weixin.onmouseenter=function()
    {
    	subMenu.style.display="block";
    }
     weixin.onmouseleave=function()
    {
    	subMenu.style.display="none";
    }
</script>
</body>
</html>