ul drop-down menu shifts slightly when page is zoomed

[xhokli]

I have an input with an auto suggest drop-down menu. The problem I have is when the page is zoomed, the ul shifts slightly from the input field so it is no longer parallel or flush with the input field. Is there a better way I can do this? I have the code here and also I made a jsfiddle to demonstrate.\[code\].suggestionsBox{ position:absolute; top:24px; left:37px; width:200px; padding:0px; background-color:fff;}.suggestionList{ margin:0px; padding:0px;}.suggestionList ul li { list-style:none; margin: 0px; padding:6px;}.suggestionList ul li:hover { background-color: #DAD6D6; color:#000;}ul{ font-size:12px; padding:0; margin:0; border:1px solid grey; border-top:none; }.load{ background-position:right; background-repeat:no-repeat;}table{ border-collapse:collapse; }#suggest { position:relative;}#email{ outline: none; width:200;color:grey; border:1px solid grey; padding:2;} <div id = "suggest"><div> <table> <td>email:</td> <td><input type = "text" id = "email" autocomplete = "off" placeholder = "type something then zoom" /></td> </table><div class="suggestionsBox" id = "suggestions" style = "display: none;"><div class="suggestionList" id = "suggestionsList"></div></div></div></div>\[/code\]and the javascript:\[code\]$('#email').bind('keyup',function() { if($('#email').val().length >0) { $('#suggestions').show(); $('#suggestionsList').html("<ul><li>now zoom in or out</li><ul>"); }else $('#suggestions').hide(); });\[/code\]