Jquery 绝对框内的css内联元素，相对框内的绝对框内的css内联元素

我是web开发的初学者，我正在构建我的第一个交互式网页。我遇到了一个特殊的问题，希望有人能帮助我。这是我的第一个问题，所以如果我忘记提及或发布所有信息，我会提前道歉。很抱歉，代码太长了：）（我试图删除所有不相关的内容）

所以。。。我希望以内联方式显示列（class=“column”），但它们在另一列下显示一列。可能的问题可能与列位于绝对定位框内（class=“menu”->在相对框（class=“category”）中的JavaScript！）悬停时变为class=“active”

我做了一个JSFiddle：

HTML:

JavaScript:

$(function(){

// OPEN AND CLOSE MENUS

$('.category').on('mouseover', function() {
    // When user moves over category...
    $(this).children('.menu').removeClass('menu').addClass('active');
    // remove class menu and add class active
});

$('.category').on('mouseout', function() {
    // When user moves down from category...
    $(this).children('.active').removeClass('active').addClass('menu');
    // remove class active and add class menu
    }); 
});

---

我不确定这是否是你想要的，但看看这是否是你想要的

具体来说，我将

列的
宽度
更改为
最小宽度
，并将
显示：内联
添加到
。列ul li

.column {
    min-width: 120px;
    display: inline-block;
    vertical-align: top;}

.column ul li { display: inline; }

或者，尝试向css中的
.active
类添加一个
宽度
，例如
245px
。
您的.active div太小，您可以通过向其添加一个固定宽度来修复它：谢谢您的回答，但我不希望有固定宽度，因为不同的.active div可以有0到7个.columns div。我想让.active div的宽度取决于.div列的数量。谢谢你的回答，但我没有解释我真正想做什么。我希望使列内联，并且.active/.menu div的宽度取决于其中的列数（在不同的.active/.menu div中有1到7列）。
$(function(){

// OPEN AND CLOSE MENUS

$('.category').on('mouseover', function() {
    // When user moves over category...
    $(this).children('.menu').removeClass('menu').addClass('active');
    // remove class menu and add class active
});

$('.category').on('mouseout', function() {
    // When user moves down from category...
    $(this).children('.active').removeClass('active').addClass('menu');
    // remove class active and add class menu
    }); 
});

.column {
    min-width: 120px;
    display: inline-block;
    vertical-align: top;}

.column ul li { display: inline; }