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

Question

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

子类别必须水平显示：

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

我尝试了 jquery ui menu menu 小部件来实现这一点。 子类别垂直显示。如何更改它以使子类别水平显示？

jquery ui 是否可以为此打补丁，或者是否有其他控件允许这样做。 子菜单必须在鼠标悬停时打开。 jquery-ui 菜单允许使用鼠标悬停打开，但我还没有找到水平渲染第三级的方法。

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

更新

演示在http://jsfiddle.net/cNgG5/

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

        <ul>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
            <li><a href="#">Submenu</a>
            </li>
        </ul>
    </li>
<script>    
$(function () {
    $("#menu").menu();
} );
</script>    

将光标移至类别并出现单列菜单。如何渲染到多列？

Answer 1

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

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

和

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

更新：

对不起..我没有做足够的测试..改为这样做（代码中提供了解释）http://jsfiddle.net/cNgG5/7/

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

技巧：使用immediate child 选择器。

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

Answer 2

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

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

jQuery UI horizontal grouped menu

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

css 会是这样的：

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