HPに使うカテゴリメニューのマウスオンした時の動き

前提・実現したいこと

ホームページのトップなどに表示される縦並びのカテゴリメニューを製作しています。
マウスホバーで子要素を表示し、transitionで表示する時間を作っています。
しかし、親要素にマウスを載せるとなぜか伸びてしまい、子要素も出てくるところが同じところです。
ポジションあたりが間違っているような気もするのですが、原因が分かりません。
必要であればカテゴリごと、サブごとに名前を振ってもいいと思っています。

実現したいのは
・マウスオンした時にその右側から子要素のメニューが出てほしい
・親要素はマウスオンしても動かないようにしたい

以上です。

該当のソースコード

<style>#sample{
  position: relative;
  z-index: 20;
  width: 200px;
  /*margin: 0 0 20px -19px;*/
  padding: 10px 0;
  border: 3px solid #3b7960;
  border-radius: 0 0 3px 3px;
  /*box-shadow: 3px 3px 5px #aaa, -3px 3px 5px #aaa;*/
  font-size: 16px !important;
  background: #fff;
  color:#333;
}
#sample li{
  list-style-type : none;
  margin: 3px;
  padding: 0px;
  color:#333;
}
#sample li a{
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #0e2236;
  text-decoration: none;
  line-height: 15px;
}
#sample > li:hover > a{
  color:#e47911;
  font-weight: bold;
}
#sample ul li a:hover{
  color:#e47911;
  text-decoration: underline;
}
#sample > li:hover > a:after{
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 0px;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left-color: #aaa;
}
#sample ul{
  visibility: hidden;
  position: absolute;
  top: 3px;
  left:210px;
  width: 200px;
  height: 280px;
  margin: 0;
  padding: 0px;
  border-top: 3px solid #2f3842;
  border-radius: 0 0 3px 0;
  background: #fff;
  box-shadow: 3px 3px 5px #aaa, 3px 0px 3px #ccc inset;
  opacity: 0;
  transition: opacity 2s 0s ease;
  
}
#sample li:hover ul{
  visibility: visible;
  position:relative;
  margin-top:5px;
  margin-left:-15px;
  opacity: 1;
}
#sample ul li a{
  padding: 8px 15px;
}
#sample li ul li a{
  visibility: hidden;
  opacity: 0;
  transition: .5s;
}
#sample li:hover ul li a{
  visibility: visible;
  opacity: 1;
}

</style>
<ul id="sample">
  <li>
    <a href="#">カテゴリ1</a>
    <ul >
      <li><a href="#">サブ1</a></li>
      <li><a href="#">サブ2</a></li>
      <li><a href="#">サブ3</a></li>
      <li><a href="#">サブ4</a></li>
      <li><a href="#">サブ5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">カテゴリ2</a>
    <ul>
      <li><a href="#">サブ6</a></li>
      <li><a href="#">サブ7</a></li>
      <li><a href="#">サブ8</a></li>
      <li><a href="#">サブ9</a></li>
      <li><a href="#">サブ10</a></li>
    </ul>
  </li>
  <li>
    <a href="#">カテゴリ3</a>
    <ul>
      <li><a href="#">サブ11</a></li>
      <li><a href="#">サブ12</a></li>
      <li><a href="#">サブ13</a></li>
      <li><a href="#">サブ14</a></li>
      <li><a href="#">サブ15</a></li>
      <li><a href="#">サブ16</a></li>
      <li><a href="#">サブ17</a></li>
    </ul>
  </li>
  <li><a href="#">カテゴリ4</a>
    <ul>
      <li><a href="#">サブ18</a></li>
      <li><a href="#">サブ19</a></li>
      <li><a href="#">サブ20</a></li>
    </ul>
  </li>
  <li><a href="#">カテゴリ5</a>
    <ul>
      <li><a href="#">サブ21</a></li>
      <li><a href="#">サブ22</a></li>
      <li><a href="#">サブ23</a></li>
    </ul>
  </li>
  <li><a href="#">カテゴリ6</a>
    <ul>
      <li><a href="#">サブ24</a></li>
      <li><a href="#">サブ25</a></li>
      <li><a href="#">サブ26</a></li>
      <li><a href="#">サブ27</a></li>
      <li><a href="#">サブ28</a></li>
      <li><a href="#">サブ29</a></li>
    </ul>
  </li>
</ul>