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

问题描述：

是否可以使用CSS在两列子菜单中显示无序列表的元素？我想实现类似this，但在子菜单中没有多个<div>。我试过this，但我有两个问题：将无序列表拆分为两列的最简单方法

如果它们具有不同的宽度（明显）的子菜单项不对齐，我想保留，由于那是因为我不知道各家之长项目
盘旋在它

我怎样才能解决这些问题时，我不能让选择顶端菜单？

你说你不想要的宽度是固定的，但你希望他们在每一列都统一？ – 2012-02-28 21:14:19

其实你是对的...我应该让他们的宽度固定。 – Mike 2012-02-28 21:23:59

实际上詹姆斯蒙塔涅对问题＃2和问题＃2的问题做出了回答......我怎样才能接受这两个答案？ – Mike 2012-02-28 21:37:45

答

，如果它们是不同宽度的（明显）的sumenu项目不对齐，我想保留，由于那是因为我不知道长度每个项目的

你可以使用min-width作为子菜单li，因此它会根据内容对齐或扩展。

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

我不能让选择顶端菜单（当它盘旋等）

在你的CSS

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

定义如下一类.active，并尝试下面的脚本，

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

答

你可以尝试使用这个jquery插件columnizer。

这是一个很好的。我尝试像这样http://jsfiddle.net/S9t7Y/30/，但现在子菜单不再显示。我的目标是错误的吗？ – Mike 2012-02-28 21:32:16

答

如果你打开固定宽度，然后像下面将工作：

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

最终我同意固定宽度:) – Mike 2012-02-28 21:33:25

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

相关推荐