jQuery/CSS3菜单鼠标悬停特效

菜单效果样式演示

效果截图，查看DEMO

CSS、jQuery代码

HTML代码：

    <div id=“menu-holder”>
    <div>
    <ul class=“menu”>
    <li><a href=“http://www.flashuser.net”>Home</a></li>
    <li><a href=“#”>Dropdown</a>
    <ul>
    <li><a href=“http://www.flashuser.net/category/css”>CSS</a></li>
    <li><a href=“http://www.flashuser.net/category/tutorials”>Tutorials</a></li>
    <li><a href=“http://www.flashuser.net/category/photoshop”>Photoshop</a></li>
    </ul>
    </li>
    <li><a href=“#”>Categories</a>
    <ul>
    <li><a href=“http://www.flashuser.net/category/freebies”>Freebies</a></li>
    <li><a href=“http://www.flashuser.net/category/photography”>Photography</a></li>
    <li><a href=“http://www.flashuser.net/category/web-design”>Web Design</a></li>
    <li><a href=“http://www.flashuser.net/category/wordpress”>Wordpress</a></li>
    <li><a href=“http://www.flashuser.net/category/inspiration”>Inspiration</a></li>
    </ul>
    </li>
    <li><a href=“#”>Contact</a></li>
    </ul>
    </div>
    <div id=“corner-left”>Corner left</div>
    <div id=“corner-right”>Corner right</div>
    <div class=“content”>
    </div>
    </div>

CSS代码：

    #menu-holder{margin:20px auto;width: 700px;height:61px;}
    .menu {margin:0 auto;
    padding:0;
    width:700px;
    height: 61px;
    background: #656d80;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #656d80),color-stop(0.6, #8690a9));
    background: -moz-linear-gradient(center bottom,#656d80 0%, #8690a9 60%);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#8690a9′, endColorstr=’#656d80′);
    }
    .menu li {background: url(“../images/menu-separator.gif”) no-repeat scroll right center transparent;padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: ‘Oswald’, sans-serif;font-size:18px;}
    .menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0px 1px 0px #000000;}
    .menu li:hover > a {color:#ffffff;
    background:#56596a;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #56596a),color-stop(0.6, #686c80));
    background: -moz-linear-gradient(center bottom,#56596a 0%, #686c80 60%);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#686c80′, endColorstr=’#56596a’);
    }
    /* drop down sub-menu */
    .menu ul { background: #56596a;
    display: none;
    margin: 0;
    padding: 0;
    width: 190px;
    position: absolute;
    top: 61px;
    left: -1px;
    }
    .menu li:hover > ul {display: block;}
    .menu ul li {display:block;
    float: none;
    margin: 0px 0px 0px 15px;
    padding:2px 0px;
    background:url(“../images/submenu-sep.gif”) no-repeat scroll left bottom transparent;
    }
    /* sub menu hover link */
    .menu ul li:hover a, .menu li:hover li a {
            background: none;
            color: #ffffff;
    }
    .menu ul a {
    display:block;height:auto;
            font-size: 14px;
            padding:15px 0px 15px 10px;
    }
    .menu ul a:hover, .menu ul li:hover > a{
            background: #56596a !important;
            /* fix IE */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#56596a’, endColorstr=’#56596a’); 
            background: -webkit-gradient(linear, left top, left bottom, from(#56596a), to(#56596a)) !important;
            background: -moz-linear-gradient(top,  #56596a,  #56596a) !important;
            color: #e0e0e0 !important;
    }
    #corner-left{position:absolute;background:url(“../images/corner-left.png”) no-repeat 0 0;top:19px;left:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}
    #corner-right{position:absolute;background:url(“../images/corner-right.png”) no-repeat 0 0;top:19px;right:-83px;width:94px;height:60px;text-indent:-9999px;z-index:-2;}

jQuery代码：

    if (jQuery().superfish) {
                    jQuery(‘ul.menu’).superfish({
                            delay: 230,
                            animation: {opacity:’show’, height:’show’},
                            speed: ‘fast’,
                            autoArrows: false,
                            dropShadows: false
                    });
            }
            });