After searching for solutions in the support resources and experimenting with various techniques, I am struggling to divide this CSS Dropdown menu into two columns. The nav list is long enough that it extends below the fold.
Although the menu adapts responsively, I specifically need the two-column layout to apply when expanded, not when it shrinks for mobile viewing (which is working fine). Additionally, I'm using a jQuery script in conjunction with my code.
Despite numerous adjustments attempted on my end, I have yet to succeed in splitting the drop-down menu into two side-by-side columns. Any suggestions or guidance on accomplishing this would be greatly appreciated!
Below is the HTML:
<div id='cssmenu' class='align-center'>
<ul>
<li><a href='index.html'>Home</a></li>
// Remaining list items omitted for brevity
</ul>
</div>
Provided CSS Styles:
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
// CSS styles omitted for brevity
Here's the jQuery:
(function($){
$(document).ready(function(){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}
});
});
})(jQuery);