悬浮导航无js实现

利用display:none;这一属性，实现鼠标悬浮出现内容的效果；
简单的案例如下：

<ul class="sidebar">
    <li class="sidebar_li sidebar_li1">
        <div class="sidebar_content sidebar_content1">
            <ul>
                <li><i></i><a>我是第一</a></li>
                <li><i></i><a>我是第二</a></li>
                <li><i></i><a>我是第三</a></li>
                <li><i></i><a>我是第四</a></li>

             </ul>
          </div>
     <li class="sidebar_li sidebar_li2">
         <div class="sidebar_content sidebar_content2">
             <p><img src="https://www.jucaicat.com.cn/images/footer/thumb_11469.png" alt></p>
             <p>扫一扫下载客户端</p>
          </div>
     </li>
     <li class="sidebar_li3 sidebar_li"></li>
</ul>

css代码如下：

/*css reset start*/
*{
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
font-family: "Microsoft YaHei", "SimHei", "Arial", "NSimSun", "SimSun";
}
a{
text-decoration:none;
color:#666;
}
/*css reset end*/

/*sidebar start*/
.sidebar{
position:fixed /*固定定位*/
bottom:50px;
right:20px;
width:50px;
bordr:1px solid #ccc;
background-color:#e2e2e2;
}
.sidebar .sidebar_li{
height:47px;
width:100%;
vertical-align:middle;/*为了让li垂直居中*/
background: url(https://www.jucaicat.com.cn/images/footer/img.png) no-repeat; /*设置背景图片*/
}
  .sidebar .sidebar_li1{
    background-position: 0 -656px;
  }
  .sidebar .sidebar_li2{
    background-position: 0 -714px;
  }
  .sidebar .sidebar_li3{
    background-position: 0 -770px;
  }
 .sidebar-content {
            position: fixed;  /*让要隐藏的内容固定定位*/
            right: 69px;
            bottom: 50px;
            border: #e8e8e8 solid 1px;
            width: 124px;
            height: 121px;
            padding: 10px 0px;
            display: none;
            background-color: #fff;
    }
    .sidebar-content1 li {
        height: 31px;
        vertical-align: middle;/*让li垂直居中*/
        width: 100%; 
        text-align: center;  
    }  
    .sidebar-content1 li i{
        width: 25px;
        height: 31px;
        display: inline-block;
        background:url(https://www.jucaicat.com.cn/images/footer/img.png) no-repeat;
        background-position:3px -138px;
        margin-left: 14px;
    }
    .sidebar-content1 li a{
        vertical-align: top;
        display: inline-block;
        height: 31px;
        font-size: 16px;
        line-height: 31px;
    }
    .sidebar-content2{
        text-align: center;

    }
    .sidebar-content2 p img{
        width: 107px;
        height: 107px; 

    }
    /* 侧边栏hover显示事件 start */
    .sidebar .sidebar_li:hover .sidebar-content{
        display: block;
    }
    .sidebar .sidebar_li:hover {
        background-color: white;
        border-left: 1px solid transparent;
    } 
/*sidebar end*/

效果图如下：