导航栏被撕开了

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

这只是一个问题。

这里看看：

.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