输入后显示的列表无法定位到搜索宽下面怎么回事？
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge; charset=UTF-8""/>
<title>bing search</title>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#ccc;
}
.bg-img{
width:1366px;
height:768;
background-image:url(river.jpg);
margin:0 auto;
position:relative;
}
.logo{
width:107px;
height:53px;
background-image:url(logo.png);
float:left;
margin:-5px 10px 0 0;
}
.search_form{
float:left;
background-color:#fff;
padding:5px;
}
.txt{
width:350px;
height:29px;
line-height:29px;
border:0;
float:left;
outline:none;
}
.sub{
border:0;
width:29px;
height:29px;
background-image:url(search-button.png);
}
.search_box{
position:absolute;
top:20%;
left:25%;
}
.suggest{
width:388px;
background-color:#fff;
border:1px solid #999;
display: none;
}
.suggest ul{
list-style: none;
margin:0;
padding: 0;
}
.suggest ul li{
padding:3px;
font-size:14px;
line-height: 25px;
cursor:pointer;
}
.suggest ul li:hover{
text-decoration:underline;
background-color:#e5e5e5;
}
</style>
</head>
<body>
<div class='bg-img'>
<div class='search_box'>
<div class='logo'></div>
<form id='searchForm' class='search_form' action='https://cn.bing.com/search' target="_blank">
<input type="text" class="txt" id='search_input'>
<input type="submit" class="sub" value=''>
</form>
</div>
</div>
<div class='suggest' id='search_suggest'>
<ul>
<li>搜索内容1</li>
<li>搜索内容2</li>
<li>搜索内容3</li>
<li>搜索内容4</li>
</ul>
</div>
<script>
$("#search_input").bind('keyup',function(){
$("#search_suggest").show().css({
position:'absolute',
top:$("#search_form").offset().top+39,
left:$("#search_form").offset().left,
});
})
</script>
</body>
</html>
