Question

Is it possible to show elements of an unordered list in a two-column submenu using CSS? I want to achieve something like this, but without having several <div>s in the submenu. I tried this, but I have two issues:

1. The submenu items do not align if they are of different widths (obvious) and I would like to keep that as it is because I do not know the length of each item
2. I cannot keep the top menu selected when hovering over it

How can I fix these issues?

Answer 1

the sumenu items do not align if they are of different width (obvious)
and I would like to keep that as it is because I do not know the
length of each item

You can use min-width for sub-menu li and so it would align or expand as per the contents.

#menu_main ul li ul li{
    display:block; 
    margin: 0; 
    border: 1px solid red; 
    min-width: 100px;
}

I cannot keep selected the top menu (like when it is hovered)

Define a class .active as below in your css

a.active {color:#666 !important; background:white !important; border:2px solid #d5d5d5 !important; } 

And Try below script,

$(document).ready(function() {
    $(".mainop").hover(function() {
        var $this = $(this);
        $this.find("ul").slideDown("fast");
        $this.children('a:first-child').addClass('active');
    }, function() {
        var $this = $(this);
        $this.find("ul").slideUp("fast");
        $this.children('a:first-child').removeClass('active');
    });
});

DEMO