Overflow visible is not working in IE 8

I have a list box that shows when I mouseover an input box. My problem is the listbox even if I specify the CSS rulee overflow:visible it is still now showing the whole listbox and instead it fits the listbox to the width of the outer div.

But if I try to view it using Firefox or Chrome the whole listbox is showing. Please help.

Thanks, Sherry

---

Update: here's the html code

<div id="book_panel">
    <div id="book_heading">
        <div style="padding:5px 0 0 5px;">
            <span style="font-size:22px; font-family: Arial, Verdana, Sans-Serif;">Book Now</span><span style="font-size:19px; font-family:Arial;color:#e9d59e;">&nbsp;|&nbsp;</span>
            <span style="font-size:12px; font-family: Arial, Verdana, Sans-Serif;color:#e9d59e;">Best rate guarantee</span>
        </div>
    </div>
    <div id="booking_form_row1">
        <div id="row1Row1"><label id="findHotel">Hotel</label></div>
        <div id="row1Row2" >
            <div id="hotelSelector">
               <input id="txtHotel" name="txtHotel" value="Select a Hotel" runat="server"  />
                <input id="txtHotelValue" type="hidden" runat="server" />
                <div class="restHotel">
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr><td>&nbsp;<b>Hotels</b></td></tr>
                        <tr onclick="return setHotel(1,'Flora Grand, Near Al Ghurair Shopping Mall, Dubai');" class="highLightRow">
                            <td  width="150px;"><a href="#" title="Flora Grand, Near Al Ghurair Shopping Mall, Dubai" id="lnkHotel1">Flora Grand</a></td>
                            <td width="200px;">Near Al Ghurair Shopping Mall</td> 
                            <td  width="50px;">Dubai</td>
                            <td><asp:Image ID="Image5" runat="server" ImageUrl="../media/images/four_star.png" Width="44" Height="8" /></td>
                        </tr>
                     </table>
                 </div>
             </div>
         </div>
    </div>

---

Here's the css

#book_panel {overflow:visible!important;padding:0!important;max-height:330px;width:270px;position:absolute;color:#fff;top:120px; left:10px; z-index:9999; border: 0px red solid; background-color:#201913;  filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";}
#book_panel #book_heading {display:block;position:relative;border: 0px red solid; text-align:left; width:270px;margin: 0; height:30px;background-color:#362615;filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";}

.hiLightRow{background-color:#201913; cursor:hand;}

#book_panel label {width:80px; display:block; margin:2px 0 5px 0;padding:0; float:left; color: #fff; font: normal 12px Arial, Verdana,sans-serif!important;}
#book_panel select{width:55px;color: #000;background: #f9f9f9;border: 1px solid #e9d59e; padding-left: 3px;}
#book_panel input {font-size:13px;}
#book_panel a:hover{background-color:#201913;color:#fff;}

#book_panel div#booking_form_row1 开发者_JAVA百科input {width:240px;}
#book_panel div#booking_form_row1 {float:left; width:250px;position:relative;margin: 0 10px 0 10px; border: 0px solid red;}
#book_panel div#booking_form_row1 #row1Row1 {width:250px;height:19px;float:left;margin-top:3px;}
#book_panel div#booking_form_row1 #row1Row2 {width:250px;float:left;margin-top:3px;border: 0px solid red;}

/*Hotel Fancy Listbox */
#book_panel div#booking_form_row1 #row1Row2 .restHotel{position:absolute;z-index:9999; width:450px!important;overflow:visible!important;}
#book_panel div#booking_form_row1 #row1Row2 table {float:left;margin:0;padding:0;width:450px!important;border:1px solid #a57e03;background-color:#6b5527;}
#book_panel div#booking_form_row1 #row1Row2 tr {width:450px;color:#fff;font: 12px Arial, Verdana, sans-serif;padding-left:3px;padding:2px 3px 2px 5px;overflow:visible!important;}
#book_panel div#booking_form_row1 #row1Row2 td a{color:#fff;font: 13px Arial, Verdana, sans-serif;padding:1px 2px 1px 4px;}

---

and the jquery syntax that I use

 $("#ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel").hover(function () {
        $(".restHotel").slideDown("300");
});


 $(".restHotel").mouseleave(function () {
$(this).slideUp("300");
 });

---

There is no element with the ID "ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel", which is what you reference in your jQuery selector for slideDown(). You probably want this instead:

$("#txtHotel").hover(function () {
    $(".restHotel").slideDown("300");
});

Your div.restHotel element is set to visible by default, so it is visible right away, instead of waiting for the cursor to hover over the input box.

Your example code does not define the JavaScript setHotel() method.

Other than that, your example seems to work in IE9 Beta using the IE8 Browser Mode. If there is still something else wrong that your example code isn't demonstrating, then you may want to provide more information.