I googled this problem and implemented some of the jQuery code provided but nothing worked. How do I get my datepicker to show up in front of the dropdown?

This is my HTML:

<table>

<tr><th>Start Date:</th><td>

<div class="input text">

<label for="MealplanEventDate"></label>

<input type="text" name="event_date" size="44" id="MealplanEventDate" maxlength="255"/>

</div>

</td></tr>

<tr><th>End Date:</th><td>

<div class="input text">

<label for="MealplanEndDate"></label>

<input type="text" name="end_date" size="44" id="MealplanEndDate" maxlength="255"/>

</div>

</td></tr></table>

This is my jQuery:

<script type="text/javascript">

     $(document).ready(function() {

    $('#MealplanEventDate').datepicker({

dateFormat: 'yy-mm-dd',

    });

$('#MealplanEndDate').datepicker({

      dateFormat: 'yy-mm-dd',

    });

  });

  </script>

This is my CSS:

#MealplanEventDate  {  position: relative; z-index: 10000 !important; } 

#MealplanEndDate  {  position: relative; z-index: 10000 !important; } 

.ui-datepicker {  position: relative; z-index: 10000 !important; } 

input[type=text] {position: relative; z-index: 1;}