css - 将无序列表拆分为两列的最简单方法

Question

是否可以使用 CSS 在两列子菜单中显示无序列表的元素？我想实现类似 this 的目标, 但没有几个 <div> s 在子菜单中。我试过 this ，但我有两个问题:

1. 如果子菜单项的宽度不同(很明显)，则它们不会对齐，我想保持原样，因为我不知道每个元素的长度
2. 将鼠标悬停在顶部菜单上时，我无法保持选中状态

我该如何解决这些问题？

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

您可以为子菜单 li 使用 min-width，这样它会根据内容对齐或展开。

#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)

在你的 css 中定义一个类 .active

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

然后尝试下面的脚本，

$(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