搜索列表中断设计

Question

<form class="navbar-form" role="search">
  <div class="form-group">
    <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" value="" placeholder="Search">
    <ul id="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Bella</a></li>
      <li><a href="#">Cisna</a></li>
      <li><a href="#">Diana</a></li>
    </ul>

  </div>
  <button type="" class="btn btn-default" id="ser">Search</button>

</form>

这里我试图根据html数据制作一个搜索列表。不幸的是，虽然延长了列表的长度，但我的背景div设计也在扩展并导致设计损坏。我想在不破坏设计的情况下完全在背景顶部显示列表。我已经尝试了过度打坐，但是一切都失败了。请帮我。帮助将不胜感激。

Answer 1

<form class="navbar-form" role="search">
  <div class="form-group">
    <input type="text" id="myInput" onkeyup="myFunction()" class="form-control" value="" placeholder="Search">
    <ul id="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Bella</a></li>
      <li><a href="#">Cisna</a></li>
      <li><a href="#">Diana</a></li>
    </ul>

  </div>
  <button type="" class="btn btn-default" id="ser">Search</button>

</form>

#myInput {
  
  width: 100%;
  
  font-size: 16px;
  padding: 12px 15px 12px 20px;
  border: 1px solid #ddd;
  margin-bottom: 2px;
margin-top: 2px;

}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  
}

#myUL li a {
    border: 1px solid #ddd;
    margin-top: -1px;
    background-color: #f6f6f6;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: block;
    width:320%;

}

#myUL li a:hover(.header) {
  background-color: #eee;

}
#myInput:hover #myUL {
    display: block;

}

enter image description here

在这里，我认为我非常接近我需要的实际结果，但问题是我没有得到html列表最后一个值戴安娜出来。感谢CBroe的提示，希望你能给予进一步的帮助。