菜单帮助.....子菜单随主菜单一起淡入....帮助吗? css3 [英] help with menus.....sub menu fades in with main menu....help? css3

问题描述

这是我的CSS.

this is my css.

.navigation .item a.active{
    background-position:0px -52px;
}
.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}
.item h2{
    position:absolute;
    width:147px;
    height:52px;
    color:#222;
    font-size:18px;
    top:0px;
    left:52px;
    text-indent:10px;
    line-height:52px;
    text-shadow:1px 1px 1px #fff;
    text-transform:uppercase;
}
.item h2.active{
    color:#fff;
    text-shadow:1px 0px 1px #555;
}
.item ul{
    list-style:none;
    position:absolute;
    top:60px;
    left:25px;
    display:none;
}
.item ul li a{
    font-size:15px;
    text-decoration:none;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#222;
    padding:3px;
    float:left;
    clear:both;
    width:100px;
    text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
    background-color:#424242;
    color:#fff;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
}
.item li:hover ul, li.over ul{
    background-color:#fff;
    color:#444;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:1px 1px 4px #666;
    -webkit-box-shadow:1px 1px 4px #666;
    box-shadow:1px 1px 4px #666;
    position: absolute;
    left: 110px;
    top: 0;
    display: block;
    }

这是我在其中应用的html ...主菜单

and this is my html where it gets appplied...the main menu

<div id="content">
          <div class="navigation" id="nav">
            <div class="item user">
                    &lt;img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/&gt;
                    <a href="#" class="icon"></a>
                    <h2>Sign In</h2>
                    <ul>
                        <li><a href="#">Like Us</a></li>
                        <li><a href="#">Share</a>
                    <ul id="static" class="static">
                    <li><a href="#">mother</a></li>
                    <li><a href="#">father</a></li>
                    <li><a href="#">brother</a></li>
                    <li><a href="#">sister</a></li>
                    <li><a href="#">couzin</a></li>
                    <li><a href="#">uncle</a></li>
                    </ul>

                        </li>
                        <li><a href="#">Tell</a></li>
                    </ul>
              </div>
</div></div>

并与此即时通讯使用jQuery淡入效果::

and with this im using the jquery fade in effect::

<script type="text/javascript">
    $(function() {
        $('#nav > div').hover(
        function () {
            var $this = $(this);
            $this.find('img').stop().animate({
                'width'     :'199px',
                'height'    :'199px',
                'top'       :'-25px',
                'left'      :'-25px',
                'opacity'   :'1.0'
            },500,'easeOutBack',function(){
                $(this).parent().find('ul').fadeIn(700);
            });

            $this.find('a:first,h2').addClass('active');
        },


        function () {
            var $this = $(this);
            $this.find('ul').fadeOut(500);
            $this.find('img').stop().animate({
                'width'     :'52px',
                'height'    :'52px',
                'top'       :'0px',
                'left'      :'0px',
                'opacity'   :'0.1'
            },5000,'easeOutBack');

            $this.find('a:first,h2').removeClass('active');
        }
    );
    });
</script>

一切正常，但是...当我将鼠标悬停在主菜单项上时，子菜单项也将淡入并以尴尬的方式显示>>>当我将鼠标悬停在子菜单项上时，它将消失并进入其子菜单项.原始子子菜单的位置我如何解决此问题我不希望子菜单出现在主菜单项中.我知道imindind或缺少smething.plz帮助

every thing works fine but ... when i hover over the main menu item the sub menu items also get faded in and displayed>>>in an awkward manner and when i hover over the sub menu item it dissapears and gets to its original sub sub menu place,,,,how do i solve this>>>i dont want the sub menu to appear in main menu items..i knw im addind or missing smething.plz help for demo click here

推荐答案

(

(' #nav> div').hover( 功能(){ var

('#nav > div').hover( function () { var

此=

这篇关于菜单帮助.....子菜单随主菜单一起淡入....帮助吗? css3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！