下拉菜单 - 将子项目除以2并将它们分成两列

Question

我有菜单，每个顶部都有子菜单，子项目的数量是未知的，我想，如果有超过13项，那么，将它们除以2，然后将它们放入容器中，作为列，我可以在这里使用css3列计数，但我需要javascript（jQuery）版本。

      $('.sub-menu').each(function() {
      var count = $(this).find("li").length; 
    if(count >= 12 ){
        $(this).addClass('col2');
    }

   if(count >= 24){
      $(this).toggleClass('col2 col3');
    }
});

现在我有了这个，

我需要动态更改它

这里是jsfiddle

http://jsfiddle.net/3KB9j/12/

Answer 1

http://jsfiddle.net/3KB9j/14/

CSS

li.col2 { 
    float: left;
    margin: 2px 4px;  
}

.sub-menu.col2 { 
     width: 250%;
 }

jquery的

  $('.sub-menu').each(function () {
      var count = $(this).find("li").length;
      if (count >= 12) {
          $(this).addClass('col2');
          $('li').addClass('col2');
      }

      if (count >= 24) {
          $(this).toggleClass('col2 col3');
      }
  });

Answer 2

喜欢这个

<强> working demo

<强> CSS

.dropdown
{
    font-size:16px;
    font-weight:400;  
    line-height:40px;
    text-indent:15px;
    padding-right:15px;
    vertical-align:middle;
    display:inline-block;
}

.dropdown:hover
{
    background-color:green;
}

.dropdown li ul { 
    display: none; 
    border:black 1px solid;  
    position:absolute;
    background-color:white; 
    width: 150px;    
} 

.dropdown ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}


.dropdown a
{
    display:block; 
    padding-right:15px;  
    line-height:30px; 
}

.dropdown a:hover {
    color: rgb(0,0,0);
    text-decoration: underline;
}

.dropdown li:hover
{
    background-color:green;
}

.second
{
    left: 150px;
}

Answer 3

将style="width:200px"添加到li .sub-menu，然后使用此功能：

$( ".sub-menu li:odd" ).css( "float", "left" );
$( ".sub-menu li:even" ).css( "float", "right" );

<强> Working Fiddle