javascript - links in toggled nested list not clickable -

i'm totally stuck , tried several days solve problem. below see html-structure i'm working with. i'm inserting nested list via js. problem want display link1a , link1b in fiddle. can see here text of last div overwritten nested list.

but in case on site i'm trying manipulate links not clickable. guess i'm missing attribute, can't figure out one.

can me?

<div id="main">   <ul>     <li style="display: inline-block; vertical-align: top; padding: 0px;">       <a href="link1">link1</a>     </li>     <li style="display: inline-block; vertical-align: top; padding: 0px;">       <a href="#">disabled link</a>       <ul style="position: absolute; margin-top: 5px;" class="tohover">          <li>             <a href="#">link1a</a>          </li>          <li>            <a href="#">link1b</a>          </li>       </ul>     </li>   </ul> </div> 

 $(document).ready(function(){    $("#main > ul > li").css({'display':'inline-block','vertical-align':'top','padding':'0px'});    $("<ul class='tohover' style='display:none;'>       <li><a href='#'>link 1a</a></li>       <li><a href='#'>link 1a</a></li>       </ul>").insertafter("#main a[href$='link1']");    $("#main a[href$='link1']").click(function(e){     e.preventdefault();     $(".tohover").toggle().css("position","absolute").css("margin-top","5px");   });  }); 

i think problem z-index try set: <ul class='tohover' style='display:none; z-index: 999;'>