当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Insert jquery ui datepicker in dropdown menuitem

问题描述:

First of all, thanks for all the answers I've already found on this forum on all sorts of programming topics. Tried to find a solution for the following problem for the last couple of hours. Hoping there's someone who knows more about the jquery UI datepicker.

I try to insert a jquery UI datepicker in a CSS dropdown menu. In a "normal" menu (menu without a submenu) the datepicker shows as expected but in the dropdown menu I get the following result: http://jsfiddle.net/h3Stj/3/

Is it impossible to nest the datepicker in two ? Is there a solution?

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

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

}

and the code

$(function() {

$( "#datepicker" ).datepicker();

});

Many thanks!

网友答案:

The problem is not with datepicker, it is with your class name. To make it clear, following are the class which is overriding the jQUery UI datepicker.

.menu-ul
.submenu

Change you style names, in order to prevent CSS override in datepicker.

I have modified the class name in this fiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: