悬浮导航无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*/

效果图如下：