javascript - 导航栏被撕裂

Question

我的一个脚本有问题。

主要问题是 <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 有效，但现在看起来像这样

Answer 1

这只是一个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;
}

Updated JSFiddle

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

第二个版本:

.noBullet { position: relative; }

Updated JSFiddle