IE7 acting odd, hovering over ul li list appears without any break

Question

I have action list that i show when i am hover over an a link. it works fine in firefox 3.6 and Ie8 but its not working the same in IE7.

Here is my code:

<td class="noTableStyle">
 <a href="#">Actions</a>
  <ul>
   <li><a href="#" title="Edit">Edit</a></li>
   <li><a id="Delete" href="#">Delete</a></li>
  </ul>
</td>

Here is my Jquery code:

$(document).ready(function() {
        //Initialize action menu behaviour
        $("td.noTableStyle ul").hide();
        $("td.noTableStyle a").hover(function() {
            $(this).next().slideDown('fast');
        });
        $("td.noTableStyle").hover(null, function() {  $(this).children("ul").slideUp('fast'); });
   });

here is my CSS:

d.noTableStyle { 
    background-color:Transparent;
}
td.noTableStyle ul { 
    margin-top:0px; 
    list-style-type:none;
    z-index: 2; 
    position:absolute;
    float:left; 
    background-color: #EBF5F8;
    margin-left: 1px;
    padding-left:0px;
}
td.noTableStyle ul {
    background-color:#EBF5F8; 
    padding:2px;
}

In firefox/IE8 the link appears under action but in IE7 the edit and delete links are appearing on the right hand side.

I would really love some help. thanks all

Answer 1

The combination of position: absolute; and float: left; make it to stick on the right hand side of the link. Since you want to have it right below the link and the <ul> is by default already a block element, I don't see any value of making it position: absolute; float: left; position: absolute; float: left; . So I'd suggest to just remove those properties. It will work in all browsers the way you expect.