jqueryを利用してマウスオーバーした際に表示させたスライドメニューを、マウスアウトするまで表示しておく方法

Question

jqueryを利用してマウスオーバーをした際に、表示させたスライドメニューからマウスアウトするまで該当のスライドメニューを表示させたままにしておきたいのですが、どうすれば良いでしょうか。
現状のコードでは、スライドメニューを表示するためにマウスオーバーした箇所から離れると、スライドメニュー自体も消えてしまいます。
以下に試したコードを記載しておきます。

<script>
        $(function () {
            $('.gnav-item').mouseover(function () {//マウスカーソルが重なった時の処理
                $('.gnav-sub').css('visibility','visible');
            });
            $('.gnav-sub').mouseout(function () {//マウスカーソルが離れた時の処理
                $('.gnav-sub').css('visibility','');
            });
        });
    </script>

<nav class="gnav">
                <ul class="gnav-list”>
                    <li class="gnav-item product">
                        <a href=“#”>
                            テスト
                        </a>
                    </li>
		</ul>

     <div class="gnav-sub open">
                    <ul class="gnav-sub-list product”>
                        <li><a href="#">テスト1-1</a></li>
                        <li><a href="#">テスト1-2</a></li>
                        <li><a href="#">テスト1-3</a></li>
                    </ul>
	</div>
</nav>

当方初心者のため、分かりにくい部分があるかと思いますが、ご回答のほどよろしくお願いします。

Comments

[Lhankor_Mhy]

HTMLをご提示ください。

[yukiiiiiiiiiii]

HTMLの追加をいたしました。ご確認よろしくお願いいたします。

[yambejp]

命題が矛盾していませんか？
マウスアウトするまで表示させておくのですから
マウスオーバーした箇所から離れる＝マウスアウトなので
挙動はあっていると思います

Answer 1

下記のようにしてみてはいかがでしょうか。

$('.gnav-item, .gnav-sub').mouseover(function(){
//以下省略

あと、ダブルクォーテーション " が ” になっているところが見受けられますが、実際のコードはきちんと書かれていますよね。