Question

是否可以使用CSS在两列子菜单中显示无序列表的元素？我希望实现this之类的功能，但子菜单中没有多个<div>。我试过了this，但我有两个问题：

如果子菜单项具有不同的宽度（明显），则它们不会对齐，我希望保持原样，因为我不知道每个项目的长度
将鼠标悬停在上面时，我无法保持选中此菜单

如何解决这些问题？

Answer 1

如果sumenu项目的宽度不同（明显）我想保留它，因为我不知道每个项目的长度

您可以将min-width用于子菜单li，因此它会根据内容对齐或展开。

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

DEMO

Answer 2

如果您对固定宽度开放，那么以下内容将起作用：

http://jsfiddle.net/S9t7Y/27/

#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;}

Answer 3

您可以尝试使用此jquery插件columnizer。

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

3 个答案: