Show an Ajax CalendarExtender over a dropdown

Today I was really struggling with the Ajax calendar control. Once the user clicks on it, since we had a drop down, below that, the control shows a part of the dropdown as well. So we were really trying hard to make it work by using lots of javascript and styling.... But finally found a great post from this link, http://dotnetrudy.blogspot.com/2007/11/how-to-show-calendarextender-over.html.. which really helped me to overcome from this problem....

Initially our calendar looks like this,

But finally, I followed the below steps,

1. In the css file that I currently use, I pasted the following:

.ajax__calendar
{
position: relative;
left: 0px !important;
top: 0px !important;
visibility: visible;
display: block;
}
.ajax__calendar iframe
{
left: 0px !important;
top: 0px !important;
}

2. In the CssClass properties of the Calendar Extender, typed: ajax__calendar

You can create a new css file, add the contents in line one for that, and give a link to that style sheet from your master page as well.

Annnnndddd........... Finally it was working like a miracle....