ナビ・ホバー時にサブナビを表示・非表示させる

下記のサイトのように
ホバー時にサブナビを表示させたいと考えています。

実装すると、ホーバーし、サブナビを選択しようとすると、すぐに消えてしまうという問題にあたってしまいました。
参考サイトのようにサブナビをホバーしているときも表示させるようにしたいのですが。

jacascript
1$(function() {
2  var $subNav = $('.subBox');
3  $('.nBox01').hover(
4    function(){
5      // stop関数を追加
6      $subNav.stop().slideDown();
7    },
8    function(){
9      // stop関数を追加
10      $subNav.stop().slideUp();
11    }
12  );
13});

html5
1    <nav>
2      <ul>
3        <li><a href="">テキスト</a></li>
4        <li class="nBox01"><a href="#">ホバー時</a>
5      　 </li>
6      </ul>
7      
8      <div class="subBox">
9    <ul class="topicBox">
10              <li><a href="">テキスト</a></li>
11              <li><a href="">テキスト</a></li>
12            </ul>
13    </div>
14    </nav>

css
1
2nav .subBox {
3display: none;
4    position: absolute;
5    top: 0;
6    left: 250px;
7    width: 180px;
8    height: 100vh;
9    background: #c9f2f3;
10    z-index: 100;
11    -webkit-transition: all .3s ease .3s;
12    transition: all .3s ease .3s;
13}
14nav .subBox ul {
15 position: absolute;
16 top: 333px;
17 width:100%;
18 -webkit-transition: all 0s ease .3s;
19 transition: all 0s ease .3s;
20 text-align:left;
21}
22nav .subBox ul li a {
23 border-bottom: solid 1px #fff;
24 padding: 10px 30px;
25 display: block;
26}