Javascript 显示在div外部的下拉菜单

我想在我的google map api的信息窗口中放置一个按钮下拉菜单，但是，当我单击按钮激活下拉菜单时，它会出现在信息窗口内部，而不是外部，从而使信息窗口可以滚动

信息窗口代码：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = 
      `<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>`;

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });

var mylatng=new google.maps.LatLng（-25.363882131.044922）；
变量映射选项={
缩放：4，
中心：myLatlng
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var contentString=
`
下拉示例





`;
var infowindow=new google.maps.infowindow({
内容：contentString
});
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“乌卢鲁（艾尔斯岩）”，
//zIndex:Math.round（myLatlng.lat（）*-100000）添加以下CSS，它就会工作

div.gm-style-iw {
  overflow: visible !important;
  padding: 20px !important;
}
div.gm-style-iw-d{
  overflow: visible !important;
}

这是演示：
是的，但是如果列表变大，那么它就不起作用了。我已经更新了我的答案和小提琴链接，你可以试试这个，它会起作用的。