javascript - ナビゲーションバーが引き裂かれています

Question

スクリプトの 1 つに問題があります。

主な問題は、<ul>それが表示されると、ナビゲーションシステムがバラバラになることです。

赤い部分は「サブ」です。<ul>リンクがあると、実際には の右側に表示さul liれ、左の図のようにナビゲーションを離れます。

誰か助けてくれませんか？

http://jsfiddle.net/rTDzk/

そしてjQuery：

function nav() {
    $('ul li').mouseover(function () {
        $(this).find('.submenu').show();
    });
    $('ul li').mouseleave(function () {
        $('ul li .submenu').hide();
    });
    $('ul li .submenu').mouseleave(function () {
        $('ul li .submenu').hide();;
    });
};

$(document).ready(function () {
    nav();
});

HTML コード:

<ul class="noBullet">
    <li><a href="#home">home</a>

    </li>
    <li><a href="#lager">lager</a>
        <ul class="submenu">
            <li><a href="http://www.mashable.com">Mashable</a>
            </li>
            <li><a href="http://www.cnet.com">CNET</a>
            </li>
        </ul>
    </li>
    <li><a href="#anlaesseN">anlaesseN</a>

    </li>
    <li><a href="#images">images</a>

    </li>
</ul>

更新:

わかりました、これは以下のjsfiddleが機能しましたが、今はこのように見えます