For days, I've been struggling with a problem that seems unsolvable. The HTML structure below shows the layout I'm dealing with. Using JavaScript, I am trying to insert a nested list.
The issue arises when I attempt to display Link1a and Link1b in a similar fashion to this example. As demonstrated in the example, the text of the last div gets overwritten by the nested list.
However, on my website, the links I'm manipulating are not clickable. There must be an attribute missing, but identifying it has proven to be elusive. Can someone provide guidance?
<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 1b</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");
});
});