My horizontal menu contains dropdowns with li elements that are commented out dynamically. To add these dynamic li's within the dropdown-menu, I decided to use a div and append the li's using jQuery.
HTML
<li class="dropdown">
<ul class="dropdown-menu" role="menu">
<%-- <li ><a href="Link1">Link1</a></li>
<li ><a href="Link2">Link2</a></li>
--%>
<div id="dvLinks"></div>
</ul>
</li>
jQuery
var invDiv = '';
$.each(result, function (i, value) {
invDiv += '<li><a href=' + result.href + '>' + Links + '</a></li>';
});
$('#dvLinks').append(invDiv);
The problem arises because the class "dropdown-menu" does not apply to the dynamic li's. Due to technical restrictions, <div> cannot be placed directly inside <ul>. I attempted another approach as shown below, but it did not yield any results on the UI. Please assist in identifying where I may have made an error.
<li class="dropdown">
<div id="dvLinks"></div>
</li>
var invDiv = '<ul class="dropdown-menu" role="menu">';
$.each(result, function (i, value) {
invDiv += '<li><a href=' + result.href + '>' + Links + '</a></li>';
});
invDiv += '</ul>'
$('#dvLinks').append(invDiv);