title: Jquery auto complete hover css
body: <p>Hi im trying to style my jquery autocomplete, all is well but when i tried to hover on the items its displaying on a bottom left side of my page, any suggestions to fix this? here is my css code.</p>
  
  <pre><code> .ui-autocomplete {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      float: left;
      display: none;
      min-width: 160px;   
      padding: 4px 0;
      margin: 0 0 10px 25px;
      list-style: none;
      background-color: #ffffff;
      border-color: #ccc;
      border-color: rgba(0, 0, 0, 0.2);
      border-style: solid;
      border-width: 1px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
      background-clip: padding-box;
      *border-right-width: 2px;
      *border-bottom-width: 2px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/AKKzr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AKKzr.png" alt="enter image description here"></a></p>