javascript - 显示重叠项的 jQuery UI 菜单

Question

我用 jQuery UI 创建的菜单与它的子项重叠在它的分支上:

这里是 jsfiddle

HTML:

<ul id='menu'>
    <li><a href='#'>1</a>

        <ul>
            <li><a href='#'>1.1</a>

                <ul>
                    <li><a href='#'>1.1.1</a>

                    </li>
                </ul>
            </li>
            <li><a href='#'>1.2</a>

                <ul>
                    <li><a href='#'>1.2.1</a>

                    </li>
                </ul>
            </li>
            <li><a href='#'>1.3</a>

                <ul>
                    <li><a href='#'>1.3.1</a>

                    </li>
                    <li><a href='#'>1.3.2</a>

                    </li>
                    <li><a href='#'>1.3.3</a>

                    </li>
                    <li><a href='#'>1.3.4</a>

                    </li>
                    <li><a href='#'>1.3.5</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href='#'>2</a>

        <ul>
            <li><a href='#'>2.1</a>

            </li>
            <li><a href='#'>2.2</a>
            </li>
        </ul>
    </li>
    <li><a href='#'>3</a>

                <ul>
                    <li><a href='#'>3.1</a>

                    </li>
                    <li><a href='#'>3.2</a>

                    </li>
                    <li><a href='#'>3.3</a>

                    </li>
                </ul>
            </li>
            <li><a href='#'>4</a>

                <ul>
                    <li><a href='#'>4.1</a>

                    </li>
                </ul>
            </li>
            <li><a href='#'>5</a>

                <ul>
                    <li><a href='#'>5.1</a>

                    </li>
                </ul>
            </li>
        </ul>

JS

$(document).ready(function () {
    $("#menu").menu();
})

CSS

.ui-menu {
    list-style: none;
    padding:0;
    margin: 0;
    display: block;
    outline: none;
}
.ui-menu .ui-menu {
    margin-top: -3px;
    position: absolute;
}
.ui-menu .ui-menu-item {
    margin: 0px;
    padding: 0px;
    width: 14%;
    /* support: IE10, see #8844 */
    list-style-image: url(data:image/gif;
    base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.ui-menu .ui-menu-divider {
    margin: 5px -2px 5px -2px;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width:0;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    /* support: IE7 */
    font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
.ui-menu .ui-state-disabled {
    font-weight: normal;
    margin: .4em 0 .2em;
    line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
    cursor: default;
}
.ui-widget {
    font-family: Computerfont;
    font-size: 16px;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Computerfont;
    font-size: 1em;
}
.ui-widget-content {
    background: #000;
    color: #ffffff;
}
.ui-widget-content a {
    color: #ffffff;
    border:1px solid white;
    width:120px;
}
.ui-widget-header {
    border: 3px solid #000000;
    background: black;
    color: #222222;
    font-weight: bold;
}
.ui-widget-header a {
    color: #222222;
}

这是基本代码，如果您认为其中没有任何问题，完整代码在http://www.copot.eu/matei/assets。 .如果您没有发现任何问题，请告诉我，这可能只是客户端问题

Answer 1

看看这是否适合您。

.ui-menu .ui-menu-item {
    ...
    width: 133px;
    ...
}

http://jsfiddle.net/wr8Q5/6/