如何使用数据属性显示悬停菜单？

Question

我想创建一个下拉超级菜单，当我单击父链接时，它会显示出来，并使用数据属性使其动态化

<nav>
   <ul>
     <li data-id="1">link 1</li>
     <li>link 2</li>
     <li>link 3</li>
     <li>link 4</li>
  </ul>
</nav>

<div id="1">
   <ul>
     <li>link 1</li>
     <li>link 2</li>
     <li>link 3</li>
     <li>link 4</li>
  </ul>
</div>