如何强制jquery ui菜单或类似菜单水平显示第二个子菜单项

菜单有3个级别。第一级只有一个名为“全部显示”的项目。 第二级包含产品类别。 第三级包含子类别。 没有更多的菜单级别

子类别必须水平显示：

Show all
+-----------+
|Category1  |+-----------------------------------------------------------+
|Category2 >|| Subcategory21  Subcategory24  Subcategory27  Subcategory2A|
|Category3  || Subcategory22  Subcategory25  Subcategory28  Subcategory2B|
+-----------+| Subcategory23  Subcategory26  Subcategory28               |
             +-----------------------------------------------------------+

我尝试了jQueryUI菜单小部件来实现这一点。 子类别垂直显示。如何更改此设置以使子类别水平显示

jQueryUI是否可以对此进行修补，或者是否有其他控件允许这样做。 鼠标悬停时必须打开子菜单。jQueryUI菜单允许使用鼠标悬停打开，但我还没有找到水平渲染第三层的方法

在运行时从数据库读取数据。 使用jquery、jquery ui、ASP.NET/Mono MVC2

更新

演示在

$（函数（）{
$（“#菜单”）.menu（）；
} );

---

将光标移动到类别，将显示单列菜单。如何将其呈现为多列？

您可以使用CSS。例如，为所有子类别指定一个类并设置float:left。当然，我需要更多的信息来更好地帮助你。如果您可以在JSFIDLE中上传代码，那就更好了

好的，我在这里为你们的小组水平菜单提供一个尽可能简单的现场演示。您应该为每个组包含1个li，并为每个实时输入div，并且在css的帮助下，您可以做您想要的事情

---

在jquery-ui-1.10.1.custom.ss（或在其下使用的任何等效项）中，输入以下内容：

.ui-menu {
    width: 30em; /* or whatever width you want it to be */
}

及

更新：

对不起。。我没有做足够的测试。。改为这样做（代码中提供了解释）

技巧：使用选择器

---

注意：如果您的最终解决方案有多个级别的子菜单（即菜单->子菜单->子菜单等）。。然后你可以重复上面的过程。。这只是将上述样式应用到正确级别的问题

谢谢你。我在中创建了示例。若鼠标是悬停类别，sumbemu必须水平显示在多列中，但垂直显示在单列中。如何解决这个问题？谢谢。如果子菜单文本较宽，则列将重叠，如中所示。将100px样式更改为加宽将完全删除多个列。如何解决这个问题？如何将子菜单渲染为3列或4列？您知道示例中的数字。你应该在你的网站上做这件事，并检查要做什么。我问你这个问题，问题是如果其中一个菜单项超过2000个字符，我们能做什么？不可能。因此，你应该简单地为你的菜单使用简短的标题，并把它放在你的网站上。因为它不可能是一般性的。您可以将宽度设置为1000px，将每个li设置为250px，这样您就可以拥有子类别。您可以查看以下内容：。最后一种解决方法是换行：断开单词；但我建议您在项目中使用短文本谢谢。我尝试了这个修改版本，这也导致第一个菜单级别，C3，C4出现在同一级别。如何解决这个问题，使第一个不改变，只有子类别在多个列？

<ul id="menu" style="width:110px">
    <li><a href="#">Category</a>

        <ul>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
            <li>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
                <div><a href="">submenu</a></div>
            </li>
        </ul>
    </li>
</ul>

#menu{width:400px;float:left;}
#menu  li ul li{
    width:100px;
    float:left;
    word-wrap: break-word;
}
#menu li ul li div{
    width:100px;
    float:left;
}

.ui-menu {
    width: 30em; /* or whatever width you want it to be */
}

.ui-menu-item {
    display: inline-block;
    width: 100% /* TAKE THIS OUT! */
}

/* this only applies to the first level submenu.. the 30em can be replaced with whatever width 
   you want the menu to appear in */
#menu>.ui-menu-item .ui-menu {
    width: 30em;
}
/* this only applies to the items in the first level submenu.. for them to 
stack up next to each other, we want to override the width: 100% given in 
.ui-menu .ui-menu-item, without affecting the first level menu
(that was the problem with my previous answer) */
#menu>.ui-menu-item .ui-menu .ui-menu-item {
    display: inline-block;  
    width: auto;
}