写出如下要求的详细代码，1.有三个按钮，类名是nav-list，点击其中一个，出现下拉菜单，每个下拉菜单中都有四个用a标签写的按钮，2.点击其中一个按钮之后，下拉菜单就会隐藏，3.再次点击其中任何一个按钮，都可以出现下拉菜单

很抱歉，我可以回答您的问题。以下是您所需的代码：

HTML代码：

<div class="nav-list">
   <button class="btn-1">按钮1</button>
   <button class="btn-2">按钮2</button>
   <button class="btn-3">按钮3</button>
  
   <div class="drop-down-menu-1">
      <a href="#">菜单1</a>
      <a href="#">菜单2</a>
      <a href="#">菜单3</a>
      <a href="#">菜单4</a>
   </div>
  
   <div class="drop-down-menu-2">
      <a href="#">菜单1</a>
      <a href="#">菜单2</a>
      <a href="#">菜单3</a>
      <a href="#">菜单4</a>
   </div>
  
   <div class="drop-down-menu-3">
      <a href="#">菜单1</a>
      <a href="#">菜单2</a>
      <a href="#">菜单3</a>
      <a href="#">菜单4</a>
   </div>
</div>

CSS代码：

.nav-list {
   display: flex;
   justify-content: space-between;
}
 
.drop-down-menu-1,
.drop-down-menu-2,
.drop-down-menu-3 {
   display: none;
   position: absolute;
   width: 200px;
   background-color: #fff;
   border: 1px solid #ccc;
   z-index: 1;
}
 
.drop-down-menu-1 a,
.drop-down-menu-2 a,
.drop-down-menu-3 a {
   display: block;
   padding: 10px 15px;
   color: #333;
   text-decoration: none;
}
 
.btn-1:focus ~ .drop-down-menu-1,
.btn-2:focus ~ .drop-down-menu-2,
.btn-3:focus ~ .drop-down-menu-3 {
   display: block;
}

JavaScript代码：

const buttons = document.querySelectorAll('.nav-list button');
 
buttons.forEach((button) => {
   button.addEventListener('click', () => {
      button.blur();
   });
});

希望可以帮到您！