在下拉菜单项中插入 jquery ui datepicker

Question

首先，感谢我在这个论坛上找到的关于各种编程主题的所有答案。在过去的几个小时里，试图找到以下问题的解决方案。希望有人更了解 jquery UI 日期选择器。

我尝试在 CSS 下拉菜单中插入一个 jquery UI 日期选择器。在“普通”菜单（没有子菜单的菜单）中，日期选择器按预期显示，但在下拉菜单中我得到以下结果：http://jsfiddle.net/h3Stj/3/

不可能将日期选择器嵌套在两个中吗？有解决办法吗？

html

    <div id="headtext">
    <nav id="menu-top">
        <ul class="menu-ul">
            <li id="menuitem0"><span>Menu</span>

                <ul class="submenu">
                    <li id="menuitem1"><a href="javascript:kalender();">Kalender Item</a>
                        <div id="datepicker"></div>
                        <div></div>
                    </li>
                    <li id="menuitem2"><a href="#">Menuitem 2</a>
                    </li>
                    <li id="menuitem3"><a href="#">Menuitem 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

CSS

nav {
    text-align: center;
}
.menu-ul li {
    list-style: none;
    min-height: 40px;
    background-color: #d92322;
}
.menu-ul a {
    text-decoration: none;
    display: block;
    color: white;
    width: 250px;
    min-height: 40px;
    padding-top: 5px;
}
.menu-ul span {
    display: block;
    color: white;
    width: 250px;
    padding-top: 5px;
    height: 35px;
}
.submenu {
    visibility:hidden;
    position: absolute;
    float: left;
}
.menu-ul li:hover .submenu {
    visibility:visible;
}
.submenu li:hover {
    background-color: #424242;
}
.submenu li {
    border-top-style: solid;
    border-top-color: white;
    border-top-width: 2px;
}
#datepicker {
    display: block;
}
.ui-datepicker {
    width: 250px;
}

和代码

$(function() {
$( "#datepicker" ).datepicker();
});

非常感谢！

Answer 1

问题不是datepicker，而是你的班级名称。为了清楚起见，以下是覆盖 jQUery UI 日期选择器的类。

.menu-ul
.submenu

更改样式名称，以防止 日期选择器中的 CSS 覆盖。

我已经修改了这个fiddle中的类名