如何使UL显示在其他元素上并延伸到框外？

Question

我希望UL显示在其他元素上，并且如果滚动位置将其移出视图，则能够超出框的边界。

＆＃13;

＆＃13;

.container {
  height: 200px;
  width: 300px;
  border: solid 1px silver;
  overflow: auto;
}
.item {
  position: relative;
  z-index: 0;
  display: block;
  height: 30px;
  width: 100px;
  border: solid 1px blue;
}
ul {
  position: absolute;
  left: 20px;
  width: 100px;
  top: 0;
  z-index: 100;
  background: white;
  border: solid 1px silver;
}

＆＃13;

<div class="container">  
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
    <ul>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
    </ul>
  </div>
  <div class="item">
    item
  </div>
  <div class="item">
    item
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Here is a JSFiddle

这就是我想要它的样子