Javascript 导航栏正在被撕开

我的一个脚本有问题

主要问题是

一旦出现，就会撕裂导航系统

红色部分是“sub”-

，带有链接，它实际上应该出现在

ul li

的右侧，并像左图一样保留导航

谁能帮帮我吗

以及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工作了，但是现在看起来这只是一个css问题

请看:

.noBullet > li { position: relative; }
.submenu {
    position: absolute;
    width: 100px;
    background: #FFFFFF;
    border:1px solid #000000;
    z-index: 1000;
    list-style-type: none;
    display: none;
    left:100px;
    top: 0;
}

我不知道为什么你喜欢相对的，但当你绝对定位它时，它会变得更容易和更容易管理

第二版：

.noBullet { position: relative; }

---

谢谢你的帮助，我的css还有一个问题。。。您将位置从相对更改为绝对-这很有效新的问题是，当我使用其他链接（如Fotos）时，它会在同一位置显示它。。。有没有一种方法可以改变Css，这样我就可以在我的所有列表中使用它？第一个版本是从列表的顶部显示它，第二个版本是在同一个位置显示它。或者我遗漏了什么。是的，你正在使用我代码的第二个版本。（相对位置位于“.noBullet”元素上）。我推出了两个版本，因为我不确定您是否希望下拉列表始终位于同一位置。将相对位置添加到.noBullet（.noBullet>li{position:relative；}）的子元素中