我已經創建了translateX效果的菜單欄。由於填充，我不能選擇後來到該菜單欄的元素。

Question

我正在給菜單欄的CSS，HTML代碼。另外我附上了我面臨問題的截圖。

檢查Menuabar的元素：

的CSS -

.menubar { 
    position: fixed; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    overflow: hidden; 
    z-index: 1; 
} 

.menu { 
    width: auto; 
    height: 40px; 
    line-height: 40px; 
    padding: 0 15px; 
    transform: translateX(85%); 
    -webkit-transform: translateX(85%); 
    -o-transform: translateX(85%); 
    -moz-transform: translateX(85%); 
    transition: all 1s ease; 
    margin: 10px auto; 
    border-radius: 5px; 
} 

在上面的截圖，你可以看到，藍色的空間，原因在於，我無法點擊它是鏈接來到這個藍色空間。

幫助我對該菜單欄進行適當的佈局，以便點擊鏈接。

Answer 1

取下DIV類的CSS菜單transform：

.menu { 
    width: auto; 
    height: 40px; 
    line-height: 40px; 
    padding: 0 15px; 
    transition: all 1s ease; 
    margin: 10px auto; 
    border-radius: 5px; 
}