Выплывающая панель css

[13bnj]

При попытке поставить скролл (overflow:auto) панели .mudsarulopas  исчезает кнопка label . Манипуляции с position не помогают.

весь код.

<input type="checkbox" id="asruk-tkilasun" aria-hidden="true">
  <nav class="mudsarulopas">
  <label for="asruk-tkilasun" class="asruk-tkilasun" onclick></label>
  <section>
    <a href="/"style="color:#fff;">Заголовок</a>
   <hr>
    <a href="/virtualnye-vystavki" style="color:#fff;text-decoration:underline;">выставки</a>
     <ul>
      <li>1</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>129</li>
      
       </ul>
   </section>
       </nav> 
<style>
.mudsarulopas {
    width: 349px; position: fixed; padding: 0; top: 0; height:100%; right: 0; background: #00747a;
    -webkit-transform: translateX(100%);  -moz-transform: translateX(100%);
    transform: translateX(100%); -webkit-transition: 0.34s;  -moz-transition: 0.34s;
  transition: 0.34s;   z-index: 9999;//overflow-y: scroll;}
  
  .mudsarulopas a {color:#fff;text-transform:none !Important;text-decoration:none;font-weight:100 !Important; margin-left:0 !Important;}
  .mudsarulopas a:hover{color:#fff000;}
  .mudsarulopas ul{//border:1px solid #3a9096;overflow: auto; margin:20px 0 50px 0;}
  
  .mudsarulopas li {//border-bottom:1px solid #3a9096; margin-top:10px;list-style: square !Important;margin-left:15px;}
.mudsarulopas:hover {background: #00747a;}
.mudsarulopas > section { padding: 15px; color: #f5f5f5 }
.asruk-tkilasun {
    position: absolute; right: 99.8%; top: 41%;  margin-top: -24px;
    left: -24px;  padding: 1em 0;  background: #dd6149;
    border-bottom-left-radius: 7px; border-top-left-radius: 7px;  color: #f7f3f1;
    font-size: 1.4em; line-height: 1; text-align: center;}
.asruk-tkilasun:after { content: '\f104'; font: normal 18px/1 'FontAwesome'; text-decoration: inherit;}
.asruk-tkilasun:hover{ cursor: pointer; color:#fff;}

[id='asruk-tkilasun'] {position: absolute; right:0; display:none;}

[id='asruk-tkilasun']:checked ~ .mudsarulopas { -webkit-transform: translateX(0);
   -moz-transform: translateX(0); transform: translateX(0);}

[id='asruk-tkilasun']:checked ~ .mudsarulopas > .asruk-tkilasun:after {
  content:'\f105';  font: normal 18px/1 'FontAwesome';
}
body { 
  -webkit-animation: bugfix infinite 1s; animation: bugfix infinite 1s;}
@-webkit-keyframes bugfix {  to { padding: 0; } }

@media (max-width: 350px) {  .mudsarulopas {
    width: 100%;  }
}  
</style>
 

.

 

[npofopr]

Делайте примеры в песочницах, например, http://jsfiddle.net/ и будет проще всем.