javascript - 导航栏被撕裂

Question

我的一个脚本有问题。

主要问题是它<ul>一旦出现就会将导航系统撕裂。

红色部分是“sub”——<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;
}

更新了 JSFiddle

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

第二个版本：

.noBullet { position: relative; }

更新了 JSFiddle