Question

I’m totally stuck and tried several days to solve my problem.
Below you see the html-structure I’m working with.
I’m inserting the nested list via JS.
My problem is that I want to display Link1a and Link1b like in this fiddle.
As you can see here the text of the last div is overwritten by the nested list.

But in my case on the site I’m trying to manipulate the links are not clickable.
I guess I’m missing an attribute, but can’t figure out which one.

Can you help 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");
  });

});

Answer 1

I think it is a problem with z-index just try to set: <ul class='tohover' style='display:none; z-index: 999;'>