почему буровое меню не работает и экраны перекрываются?

Question

У меня проблема с кодом этого бурового меню. Когда я нажимаю кнопку «щелкнуть», меню перекрывается, и появляются другие элементы экрана.

Мне нужно добавить много других кнопок и подменю, но таким образом я никогда не смогу это сделать. Я был вдохновлен меню в Интернете, но я просто не могу!

enter code here
<div class="wrapper">
<ul data-drilldown>
<li><a data-drilldown-item href="#">Home</a></li>
<li><a href="#" data-drilldown-button>Contact &#x27A4;
  <ul data-drilldown-sub>
    <a href="#" data-drilldown-back>&larr; Back</a>
    <li><a href="#">house</a></li>  
  <li><a href="#" data-drilldown-button-2>More &#x27A4;
      <ul data-drilldown-sub-2>
        <a href="#" data-drilldown-back-2>&larr; Back</a>
        <li><a href="#"><a href="">personal</a></a></li>      
      </ul>
      </a> </li>
  </ul>
  </a> </li>
  <li><a href="#" data-drilldown-button>click &#x27A4;
  <ul data-drilldown-sub>
    <a href="#" data-drilldown-back>&larr; Back</a>
    <li><a href="#">mouse/a></li>  
  <li><a href="#" data-drilldown-button-2>explor &#x27A4;
      <ul data-drilldown-sub-2>
        <a href="#" data-drilldown-back-2>&larr; Back</a>
        <li><a href="#"><a href="">mypc</a></a></li>      
      </ul>
      </a> </li>
  </ul>
  </a> </li>
  </ul>
  </div>

 <style>
[data-drilldown] a { color: #555; }
[data-drilldown] a:hover {
 color: #ff77aa;
 -webkit-transition: all .1s;
 transition: all .1s;
 }
.wrapper {
display: block;
width: 330px;
height: auto;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px 15px;
border-radius: 5px;
position: relative;
 overflow: hidden;
}
[data-drilldown] {
font-size: 17px;
-webkit-transition: all .2s;
 transition: all .2s;
 }
 [data-drilldown] li { padding: 5px 0px; }
 [data-drilldown-sub] {
 position: absolute;
 display: block;
 width: 330px;
 top: 0;
 left: 100%;
 padding: 10px 15px;
 -webkit-transition: all .2s;
 transition: all .2s;
 }
 [data-drilldown-item] {
 position: relative;
 left: 0;
 -webkit-transition: all .2s;
 transition: all .2s;
  }
 [data-drilldown-button] {
  position: relative;
 left: 0;
 -webkit-transition: all .2s;
  transition: all .2s;
   }
  [data-drilldown-button-2] {
  position: relative;
 left: 0;
   -webkit-transition: all .2s;
   transition: all .2s;
 }
  [data-drilldown-sub-2] {
 position: absolute;
 display: block;
 width: 330px;
 top: 0;
 left: 100%;
 padding: 10px 15px;
-webkit-transition: all .2s;
 transition: all .2s;
  }
 [data-drilldown-back], [data-drilldown-back-2] {
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 display: block;
 margin-bottom: 10px;
 }
.open {
 left: 0;
 visibility: visible;
 }
.open-sub-2 {
 left: 100%;
 visibility: visible;
 }
.close {
left: -100%;
 visibility: hidden;
 }
 li {
 list-style-type: none;
  }
  </style>
 <script src="//code.jquery.com/jquery-3.2.0.min.js"></script> 
 <script>
 $("[data-drilldown-button]").click(function() {
$('[data-drilldown-sub]').addClass("open");
 $("[data-drilldown-item], [data-drilldown-button]").addClass("close");
 $(".wrapper").css("height", $('[data-drilldown-sub]').outerHeight())
return false;
});
 $("[data-drilldown-back]").click(function() {
 $('[data-drilldown-sub]').removeClass("open");
 $("[data-drilldown-item], [data-drilldown-button]").removeClass("close");
 $(".wrapper").css("height", "auto");
  return false;
  });
 $("[data-drilldown-button-2]").click(function() {
 $('[data-drilldown-sub-2]').addClass("open-sub-2");
 $("[data-drilldown-sub], [data-drilldown-button-2]").addClass("close");
 $(".wrapper").css("height", $('[data-drilldown-sub-2]').outerHeight());
 return false;
 });
 $("[data-drilldown-back-2]").click(function() {
 $('[data-drilldown-sub-2]').removeClass("open-sub-2");
  $("[data-drilldown-sub], [data-drilldown-button-2]").removeClass("close");
 $(".wrapper").css("height", $('[data-drilldown-sub]').outerHeight());
 return false;
 });
  </script>