                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /搜索框制作

下拉列表框沒有在搜索框下面，而是在頁面的底部，這是為什么呢，要怎么解決這個問題？

<!DOCTYPE html>
<html>
<head>
?
?<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8">
?<title>bing search</title>
?<link rel="stylesheet" type="text/css" href="test.css">

</head>
<body>
??<div class="bg">
???<div class="search-box">
????<div class="logo"></div>
?????<form class="search-form" id="search-form" action="https://cn.bing.com/search" target="_blank">
??????<input type="text" class="search-input-text" name="q" id="search-input" autocomplete="off"/>
??????<input type="submit" value="" class="search-input-button"/>
?????</form>
???</div>

??</div>
??<div class="suggest" id="search-suggest" style="display:none">
???<ul>
????<li>手機(jī)</li>
????<li>手機(jī)游戲</li>
????<li>手機(jī)APP</li>
????<li>手機(jī)鈴聲</li>
????<li>手機(jī)主題</li>
???</ul>
??</div>
??
??<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
??<script type="text/javascript">
???$('#search-input').bind('keyup',function(){
????$('#search-suggest').show().css({
?????top:$('#search-form').offset().top+('#search-form').height,
?????left:$('#search-form').offset().left,
?????position:'absolute'
????});
???})
??</script>
</body>
</html>

?

???? body{
???background:#333;
??}
??.bg{
???background:url(image/river.jpg)no-repeat center center;
???width:100%;
???height:768px;
???position:relative;
???
??}
??.logo{
???background:url(image/logo.png);
???width:107px;
???height:53px;
???margin-left:100px;
???margin-bottom:40px;
???

??}
??.search-input-text{
???border:0;
???float:left;
???height:27px;
???width:350px;
???line-height:27px;
???outline:none;
??}
??.search-input-button{
???border:0;/*去掉邊框的顏色*/
???background:url(image/search-button.png);
???width:29px;
???height:29px;
???float:left;
???
??}

??.form{
???float:left;
???padding:5px;
???background-color:#fff;
??}
??
??.search-box{
???position:absolute;
???top:200px;
???left:400px;
???
??}
?
??.search-form{
???width:388px;
???height:39px;
??}
??.suggest{
???width:388px;
???background-color:#fff;
???border:1px solid #999;
??}
??.suggest ul{
???list-style:none;
???margin:0;
???padding:0;
??}
??.suggest ul li{
???margin:8px;
???font-size:14px;
???line-height:25px;
???cursor:pointer;
??}
??.suggest ul li:hover{
???text-decoration:underline;
???background-color:#e5e5e5;