垂直子菜单CSS帮助PLZ? [英] vertical sub menu css help plz?

问题描述

请帮助...这是我的html菜单

Please help ...this is my html menu

<div id="content">
  <div class="navigation" id="nav">
    <div class="item user">
            <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
            <a href="#" class="icon"></a>
            <h2>Sign In</h2>
            <ul>
            <li><a href="#">Like Us</a></li>
            <li><a href="#">Share</a>
            <ul id="menu">
            <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

这是我菜单的CSS:

and this is my css for my menu:

}
.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{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    position:absolute;
    left: 110px;
    top: 0;
    display: none;
    }

事实是我正在使用JavaScript淡入主菜单项，但子菜单项也随主菜单一起淡入，这使它尴尬...我希望将鼠标悬停在主菜单上时出现子菜单项项目...请帮助...

是的，这里是javascript:

the thing is that i''m using a javascript to fade in main menu items but the sub menu items also fade in with the main menu making it awkward...i want the sub menu items to appear when mouse hovered over the main menu items...please help...

and yes here is the javascript:

<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <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>

任何帮助将不胜感激.
预先感谢......:)

ANY help would be Much Appreciated.
Thanks in advance......:)

推荐答案

(function(){

(function() {

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

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

此=

这篇关于垂直子菜单CSS帮助PLZ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！