javascript - Creating menu with jQuery -

<li><div class="link" id="contentlink1"><a href="link1.html" target="_blank">link 1</a></div></li>  <li><div class="link" id="contentlink2"><a href="link2.html" target="_blank">link 2</a></div></li> 

i generating these links through db , want add link2 within link1 create nested navigation have inject jquery create nested navigation.

for have tried grab link2 html , put after link1 html did not work. can or suggest solutions can create nested navigation through jquery.

var link2 = $('#link2').parent().html();   var link1 = $('link').after();  link1 = link2;  console.log(link1); 

i playing around see weather link2 contents copied inside link1 html content did not work.

you can check fiddle. have add css though. also, not sure why adding link inside div, doesn't seem necessary me. [updated code snippet smoother effect on mouseenter/leave , added css]

$('#contentlink1').on({    mouseenter: function() {      $('.submenu').css('display', 'flex');    },    mouseleave: function() {      $('.submenu').css('display', 'none');     }  });    $('.submenu').append('<li><div class="link" id="contentlink2"><a href="link2.html" target="_blank">link 2</a></div></li>');

.submenu {    display: none;    list-style: none;    width: 100%;    margin: 0px;    padding: 0px;    z-index: 10;  }  .submenu li .link {    background-color: #ccc;  }     .link {    background-color: #000;    width: 80px;    text-align: center;  }  {    color: #fff;    text-decoration: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <li>    <div class="link" id="contentlink1">      <a id="link1" href="link1.html" target="_blank">link 1</a>      <ul class="submenu">             </ul>    </div>  </li>