鼠標經過按鈕上方 ，hover的時候，側邊欄向右滑出顯示，且可點擊（hover顯示側導航）

1. html代碼示例：

結構要點： 要顯示的**側邊欄是按鈕的子級 **

  <div class="btn_slidebar">
    顯示側邊欄
      <ul  class="test_slidebar">
        <li>分類1</li>
        <li>分類2</li>
        <li>分類3</li>
      </ul>
    </div>

2. css代碼示例：

.btn_slidebar{ 
  width:100px;
  height: 40px;
  background: rgb(78, 194, 233);
  line-height: 40px;
  color:#fff;
  border-radius: 8px;
  box-shadow: 4px 2px 4px #808e8f;
  cursor: pointer;
}

.test_slidebar{
  width:150px;
  background: lightcoral;
  margin-top:20px;
  margin-left:-200px; /* 1. 初始，讓側邊欄在屏幕外部 */
  transition: margin-left 0.5s; /* 2. 讓margin-left有一個過渡效果,看實際情況，如果用了定位，也可以控制定位的left 值 */
}

.btn_slidebar:hover .test_slidebar{ /* */
  margin-left:0px; /* 3.  鼠標經過按鈕的時候，讓側邊欄回到原來的位置*/
}

鼠標移入後效果：