我有以下代码:

的HTML

<ul id="navigation">
<li class="quickHelp"><a href="" title="Ayuda Rápida"></a>
    <div>
        Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.
    </div>
</li>
</ul>


的CSS

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 300px;
    height: 350px;
    background-color:#CCC;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    opacity: 0.6;*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .quickHelp a{
    background-image: url(../Content/images/info/leftBanner.png);
    background-position: right;
}

ul#navigation div{
    position: absolute;
}​


JS

$('#navigation a').stop().animate({ 'marginLeft': '-275px' }, 1000);

$('#navigation > li').hover(
    function () {
        $('a', $(this)).stop().animate({ 'marginLeft': '-2px' }, 200);
    },
    function () {
        $('a', $(this)).stop().animate({ 'marginLeft': '-275px' }, 200);
    }
);


我想要实现的是我希望<div>的内容显示在<li>内而不是下方...

Here是一个生动的例子...

提前致谢!

最佳答案

您不需要div,并且需要将文本放在锚点a内,因为这就是您要用作滑出位置的内容。

请参见updated JsFiddle

关于jquery - 使用li和jquery导航不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10678787/

10-12 17:11
查看更多