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!