Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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!

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

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

share|improve this answer
1  
I was clearly thinking in circles... A simple solution. Thank you very much! –  user3047866 Nov 29 '13 at 10:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.