div로 오버랩 된 버튼을 클릭 할 수있게 만들기

Question

이 효과가 무엇인지 알 수는 없지만이 이미지는 가장 도전적으로 벨을 울립니다.

당신은 작업 (메뉴의 마지막 항목)을 볼 수 있을까요? 스크롤 업하고 메뉴 요소가 아래로 내려 가면 주 div에 사라지는 것처럼 보입니다. 당신이 가장 가능성이 내가 그라데이션과 함께 DIV를 사용하고 발견으로,

#mainMenu #menuList { 
     width: inherit; 
     min-width: 218px; 
     margin: 65px 0 46px 0; 
     position: absolute; 
     top: 0; left: 0; bottom: 0; 
     overflow-y: auto; 
     overflow-x: hidden; 
     text-align: left; 
    } 

    #mainMenu #menuList:before { 
     content: ""; 
     width: inherit; 
     height: 40px; 
     position: fixed; top: 60px; 
     background: rgba(19,28,38,1); 
     background: -moz-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%); 
     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,28,38,1)), color-stop(5%, rgba(19,28,38,1)), color-stop(100%, rgba(19,28,38,0))); 
     background: -webkit-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%); 
     background: -o-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%); 
     background: -ms-linear-gradient(top, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%); 
     background: linear-gradient(to bottom, rgba(19,28,38,1) 0%, rgba(19,28,38,1) 5%, rgba(19,28,38,0) 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131c26', endColorstr='#131c26', GradientType=0); 
    } 

    #mainMenu #menuList:after { 
     content: ""; 
     width: inherit; 
     height: 40px; 
     position: fixed; bottom: 45px; 
     background: rgba(19,28,38,0); 
     background: -moz-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%); 
     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,28,38,0)), color-stop(95%, rgba(19,28,38,1)), color-stop(100%, rgba(19,28,38,1))); 
     background: -webkit-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%); 
     background: -o-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%); 
     background: -ms-linear-gradient(top, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%); 
     background: linear-gradient(to bottom, rgba(19,28,38,0) 0%, rgba(19,28,38,1) 95%, rgba(19,28,38,1) 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131c26', endColorstr='#131c26', GradientType=0); 
    } 

     #mainMenu #menuList a { 
     color: #596B80; 
     display: block; 
     padding: 8px 15px; 
     } 

     #mainMenu #menuList a:hover { 
     color: #B3C3D5; 
     } 

     #mainMenu #menuList a.active, 
     #mainMenu #menuList a.active:hover { 
     color: #18BC9A; 
     } 

HTML

<div id="menuList"> 
     <a <?php href('index.php');?>><i class="icon-arrow-left"></i>Dashboard</a> 
     <a <?php href('members.php');?>><i class="icon-arrow-left"></i>Members</a> 
     <a <?php href('projects.php');?>><i class="icon-arrow-left"></i>Projects</a> 
     <a <?php href('tasks.php');?>><i class="icon-arrow-left"></i>Tasks</a> 
    </div> 

에게 문제를 지금 그러나 :

아니라, 그 스크린 샷은 내가 사용 지금까지 한 일이다 하단의 Main 메뉴 위에 div를 오버레이합니다.

이제이 버튼을 클릭 할 수 없습니다. 어떻게하면 동일한 결과를 얻을 수 있지만 버튼을 클릭 할 수있게 할 수 있습니까?

Answer 1

당신은 PL jsfiddle 링크를 제공하므로 다음은