Выпадающий список поверх iframe

google.charts.load('current', { 
  'packages': ['corechart'] 
}); 
google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
  var data = new google.visualization.DataTable(); 
  data.addColumn('string', 'Team'); 
  data.addColumn('date', 'asd'); 
  data.addColumn({ 
    type: 'string', 
    role: 'tooltip', 
    'p': { 
      'html': true 
    } 
  }); 
 
 
  data.addRows([ 
    ['Spartak', new Date(2010, 05, 25), createCustomHTMLContent('Spartak', 'Simferopol', 'Kapitolij')], 
    ['Oreanda', new Date(2010, 06, 10), createCustomHTMLContent('Oreanda', 'Yalta', 1)], 
    ['Effekt', new Date(2010, 06, 24), createCustomHTMLContent('Effekt', 'Chernovcy', 1)], 
    ['Spartak', new Date(2010, 07, 24), createCustomHTMLContent('Spartak', 'Simferopol', 'Forum')], 
    ['Lukomore', new Date(2010, 09, 15), createCustomHTMLContent('Lukomore', 'Mariupol', 'Big')], 
    ['Adrenalin City', new Date(2010, 12, 06), createCustomHTMLContent('Adrenalin City', 'Luck', 'Red')], 
    ['Raketa', new Date(2010, 12, 16), createCustomHTMLContent('Raketa', 'Evpatoriya', 'Mars')], 
    ['Bajda 3D', new Date(2010, 12, 28), createCustomHTMLContent('Bajda 3D', 'Zaporozhe', 'Big')] 
  ]); 
 
  var options = { 
    legend: { 
      position: 'none' 
    }, 
    height: 450, 
    lineWidth: 4, 
 
    lineDashStyle: [15, 2, 3, 3], 
    pointSize: 10, 
    colors: ['#af0000'], 
    tooltip: { 
      isHtml: true 
    }, 
    hAxis: { 
      textStyle: { 
        fontSize: 14 // or the number you want 
      } 
    }, 
    vAxis: { 
      textStyle: { 
        fontSize: 14, 
 
      } 
    } 
  }; 
 
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 
  chart.draw(data, options); 
} 
 
function createCustomHTMLContent(name, city, hall) { 
  return '<div>' + 
    '<br/>' + 
    '<table class="medals_layout" style="font-family:DINPro">' + '<tr>' + 
    '<td><b>Name: </b>' + name + '</td>' + '</tr>' + '<tr>' + 
    '<td><b>City: </b>' + city + '</td>' + '</tr>' + '<tr>' + 
    '<td><b>Hall: </b>' + hall + '</td>' + '</tr>' + '</table>' + '</div>'; 
}

a:hover { 
  color: #777; 
} 
 
 
/* NAVIGATION */ 
 
.navigation { 
  list-style: none; 
  padding: 0; 
  width: 250px; 
  height: 40px; 
  margin: 20px auto; 
  background: #95C11F; 
} 
 
.navigation, 
.navigation a.main { 
  border-radius: 4px; 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
} 
 
.navigation:hover, 
.navigation:hover a.main { 
  border-radius: 4px 4px 0 0; 
  -webkit-border-radius: 4px 4px 0 0; 
  -moz-border-radius: 4px 4px 0 0; 
} 
 
.navigation a.main { 
  display: block; 
  height: 40px; 
  font: bold 15px/40px arial, sans-serif; 
  text-align: center; 
  text-decoration: none; 
  color: #FFF; 
  -webkit-transition: 0.2s ease-in-out; 
  -o-transition: 0.2s ease-in-out; 
  transition: 0.2s ease-in-out; 
} 
 
.navigation:hover a.main { 
  color: rgba(255, 255, 255, 0.6); 
  background: rgba(0, 0, 0, 0.04); 
} 
 
.navigation li { 
  position: relative; /* по умолчанию static*/ 
  z-index: 9; /* if static - z-index не работает */ 
  width: 250px; 
  height: 40px; 
  background: #F7F7F7; 
  font: normal 12px/40px arial, sans-serif !important; 
  color: #999; 
  text-align: center; 
  margin: 0; 
  -webkit-transform-origin: 50% 0%; 
  -o-transform-origin: 50% 0%; 
  transform-origin: 50% 0%; 
  -webkit-transform: perspective(350px) rotateX(-90deg); 
  -o-transform: perspective(350px) rotateX(-90deg); 
  transform: perspective(350px) rotateX(-90deg); 
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 
  -moz-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05); 
} 
 
.navigation li:nth-child(even) { 
  background: #F5F5F5; 
} 
 
.navigation li:nth-child(odd) { 
  background: #EFEFEF; 
} 
 
.navigation li.n1 { 
  -webkit-transition: 0.2s linear 0.8s; 
  -o-transition: 0.2s linear 0.8s; 
  transition: 0.2s linear 0.8s; 
} 
 
.navigation li.n2 { 
  -webkit-transition: 0.2s linear 0.6s; 
  -o-transition: 0.2s linear 0.6s; 
  transition: 0.2s linear 0.6s; 
} 
 
.navigation li.n3 { 
  -webkit-transition: 0.2s linear 0.4s; 
  -o-transition: 0.2s linear 0.4s; 
  transition: 0.2s linear 0.4s; 
} 
 
.navigation li.n4 { 
  -webkit-transition: 0.2s linear 0.2s; 
  -o-transition: 0.2s linear 0.2s; 
  transition: 0.2s linear 0.2s; 
} 
 
.navigation li.n5 { 
  border-radius: 0px 0px 4px 4px; 
  -webkit-transition: 0.2s linear 0s; 
  -o-transition: 0.2s linear 0s; 
  transition: 0.2s linear 0s; 
} 
 
.navigation:hover li { 
  -webkit-transform: perspective(350px) rotateX(0deg); 
  -o-transform: perspective(350px) rotateX(0deg); 
  transform: perspective(350px) rotateX(0deg); 
  -webkit-transition: 0.2s linear 0s; 
  -o-transition: 0.2s linear 0s; 
  transition: 0.2s linear 0s; 
} 
 
.navigation:hover .n2 { 
  -webkit-transition-delay: 0.2s; 
  -o-transition-delay: 0.2s; 
  transition-delay: 0.2s; 
} 
 
.navigation:hover .n3 { 
  -webkit-transition-delay: 0.4s; 
  -o-transition-delay: 0.4s; 
  transition-delay: 0.4s; 
} 
 
.navigation:hover .n4 { 
  transition-delay: 0.6s; 
  -o-transition-delay: 0.6s; 
  transition-delay: 0.6s; 
} 
 
.navigation:hover .n5 { 
  -webkit-transition-delay: 0.8s; 
  -o-transition-delay: 0.8s; 
  transition-delay: 0.8s; 
}

<ul class="navigation"> 
  <a class="main" href="#url">Choose year</a> 
  <li class="n1"><a href="#">2010</a></li> 
  <li class="n2"><a href="#">2011</a></li> 
  <li class="n3"><a href="#">2012</a></li> 
  <li class="n4"><a href="#">2013</a></li> 
  <li class="n5"><a href="#">2014</a></li> 
</ul> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<div id="chart_div" style="width: 100%; height: 500px;"></div>