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

是否可以使用CSS在两列子菜单中显示无序列表的元素？我想实现类似的功能，但子菜单中没有几个

s。我试过了，但我有两个问题：

如果子菜单项的宽度不同（很明显），则它们不会对齐，我希望保持不变，因为我不知道每个项的长度

当鼠标悬停在顶部菜单上时，我无法将其保持选中状态

---

如何解决这些问题？

您可以尝试使用此jquery插件

如果sumenu项的宽度不同，则它们不会对齐（显而易见） 我想保持原样，因为我不知道 每个项目的长度

您可以对子菜单li使用

min width

，因此它将根据内容对齐或展开

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

我无法在顶部菜单中保持选中状态（如悬停时）

在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');
    });
});

---

如果你对固定宽度持开放态度，那么下面类似的方法就行了：

---

你是说你不希望宽度是固定的，但你希望它们在每列中都是一致的吗？事实上你是对的。。。我应该让他们的宽度固定。事实上詹姆斯·蒙塔涅回应了第1期和第2期的SKS。。。我怎么能接受这两个答案呢？不过，我会感谢你们两位为回答这个问题所做的努力！这是个好主意。我试过这样做，但现在子菜单不再显示。我的目标是错误的吗？最终我同意了固定宽度：）

#menu_main ul li ul {display:none; position: absolute; top:auto; left:auto;width: 400px;}
#menu_main ul li ul li{float: left; display:block; width: 197px; margin: 0; border: 1px solid red;}