0

私は次のコードを持っています：

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>です...

これがその実例です...

前もって感謝します！

4

1 に答える 1

1

は必要ありませんdiv。テキストをアンカー内に配置する必要がありますa。これは、スライドアウトとして使用しているものだからです。

更新されたJsFiddleを参照してください。

于 2012-05-21T02:09:39.553 に答える