两个很炫的导航菜单（转自中国站长天空）

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单(四)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background: #171717;
}
div#menu {
    margin: 30px auto;
    width: 80%;
}
/* menu::base */
div#menu {
    height: 46px;
    padding-left: 10px;
    background: url(http://www.zzsky.cn/effect/images/20122/202245/left.png) no-repeat;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/left.gif);
    width: auto;
}
div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 10px;
    background: url(http://www.zzsky.cn/effect/images/20122/202245/right.png) no-repeat right 0;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/right.gif);
}
div#menu li {
    position: relative;
    margin: 0;
    padding: 0 0 0 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 36px;
    left: 0;
    visibility: hidden;
    width: 187px;
    padding: 0 0 11px 7px;
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.png) no-repeat 7px bottom;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.gif);
    margin: 0px 0 0 -4px;
}
div#menu li:hover>div {
    visibility: visible;
}
div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right: 5px;
    text-align: center;
}
div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}
/* menu::level1 */
div#menu a {
    padding: 0 30px 0 0;
    line-height: 40px;
    height: 46px;
    margin-right: 5px;
    _margin-right: 1px;
    background: none;
}
div#menu span {
    margin-top: 2px;
    padding-left: 30px;
    color: #fff;
    font: bold 11px Trebuchet MS,Arial,san-serif;
    background: none;
    line-height: 40px;
}
div#menu a:hover,
div#menu a.over {
    background:  url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png)  no-repeat right -1px;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif);
}
div#menu a:hover span,
div#menu a.over span {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif);
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png) no-repeat right -1px;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif);
}
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif);
}
div#menu ul.menu>li:hover>a span {
    color: #043454;
}
div#menu li {}
div#menu li.last {
    background: none;
}
div#menu li.current a,
div#menu li.current a span,
div#menu.js-active a:hover,
div#menu.js-active a:hover span,
div#menu.js-active a,
div#menu.js-active span {
    background:none;
}
div#menu.js-active ul.menu>li:hover>a,
div#menu.js-active ul.menu>li:hover>a span {
    background:none;
}
div#menu li.current a.over {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.png)  no-repeat right -1px;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-right-sub.gif);
}
div#menu li.current a.over span {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.png) no-repeat 0 -3px;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/selected-left-sub.gif);
}
div#menu a.over span {
    color: #043454;
}
/* menu::level2 */
div#menu ul ul li {
    background: none;
    padding: 0;
}
div#menu ul ul {
    padding-top: 10px;
}
div#menu ul ul a {
    padding: 0;
    height: auto;
    float: none;
    display: block;
    line-height: 26px;
    font-size: 11px;
    color: #ffffff;
    z-index: -1;
    padding-left: 5px;
    white-space: normal;
    width: 160px;
    margin: 0 5px;
    text-transform: none;
}
div#menu ul ul a span {
    padding: 0 15px;
    line-height: 26px;
    font-size: 11px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background:none;
}
div#menu ul ul a:hover {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a:hover span {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-bottom.gif) no-repeat 5px bottom;
}
div#menu ul ul a.parent span {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent:hover {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a.parent:hover span {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul span {
    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last {
    background: none;
}
div#menu ul ul li {
    width: 100%;
}
/* menu::level3 */
div#menu ul ul div {
    width: 180px;
    padding: 15px 0px 8px 0px;
    margin: -44px 0 0 169px !important;
    background: url(http://www.zzsky.cn/effect/images/20122/202245/subsubmenu-top.png) no-repeat 0px 0;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/subsubmenu-top.gif);
}
*+html div#menu ul ul div { height:10px }
*+html div#menu.ie7 ul ul div { height:auto }
div#menu ul ul ul {
    padding: 0 4px 5px 1px;
    background: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.png) no-repeat 0px bottom;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/submenu-bottom.gif);
}
div#menu ul ul div li {
    position:relative;
    top:-5px;
}
/* lava lamp */
div#menu li.back {
    background: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-left.png) no-repeat 0 0;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-left.gif);
    width: 10px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0;
}
div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-right.png) no-repeat right 0;
    _background-image: url(http://www.zzsky.cn/effect/images/20122/202245/lavalamp-right.gif);
    height: 46px;
    margin: 0 5px 0 10px;
    _margin-right: 2px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}
div#copyright {
    margin: 0 auto;
    width: 80%;
    font: 11px 'Trebuchet MS';
    color: #124a6f;
    text-indent: 20px;
    padding: 40px 0 0 0;
}
div#copyright a {
    color: #4682b4;
}
div#copyright a:hover {
    color: #124a6f;
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202245/jquery.js"></script>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202245/menu.js"></script>
</head>
<body>
<span style="color:#ffffff;">预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</span><br>
<!--把下面代码加到<body>与</body>之间-->
<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
                        </li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
        </li>
        <li><a href="#" class="parent"><span>Product Info</span></a>
            <div><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <div><ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul></div>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul></div>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>
<div id="copyright">Copyright © 2012 <a href="http://apycom.com" target="_blank">Apycom jQuery Menus</a></div>
</body>
</html>

View Code 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-导航菜单-漂亮且兼容各种浏览器的多级下拉导航菜单(一)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background: rgb(74,81,85);
}
div#menu {
    margin: 5px auto;
}
/* menu::base */
div#menu {
    height: 41px;
    background: url(http://www.zzsky.cn/effect/images/20122/202200/main-bg.png) repeat-x;
}
div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-left: 30px;
}
div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0 5px 0 0;
    display: block;
    float: left;
}
div#menu li:hover>ul {
    left: -2px;
}
div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span {
    color: #fff;
}
div#menu li.current a {}
div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
}
div#menu ul ul a.parent span {
    background-position:95% 8px;
    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/item-pointer-mover.gif);
}
/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 30px;
    color: #e5e5e5;
}
div#menu span {
    margin-top: 5px;
}/**@replace#1*/
div#menu li {
    background: url(http://www.zzsky.cn/effect/images/20122/202200/main-delimiter.png) 98% 4px no-repeat;
}
div#menu li.last {
    background: none;
}
/* menu::level2 */
div#menu ul ul li {
    background: none;
}
div#menu ul ul {
    position: absolute;
    top: 38px;
    left: -999em;
    width: 163px;
    padding: 5px 0 0 0;
    background: rgb(45,45,45);
    margin-top:1px;
}
div#menu ul ul a {
    padding: 0 0 0 15px;
    height: auto;
    float: none;
    display: block;
    line-height: 24px;
    color: rgb(169,169,169);
}
div#menu ul ul span {
    margin-top: 0;
    padding-right: 15px;
    _padding-right: 20px;
    color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
    color: #fff;
}
div#menu ul ul li.last {
    background: none;
}
div#menu ul ul li {
    width: 100%;
}
/* menu::level3 */
div#menu ul ul ul {
    padding: 0;
    margin: -38px 0 0 163px !important;
    margin-left:172px;
}
/* colors */
div#menu ul ul ul {
    background: rgb(41,41,41);
}
div#menu ul ul ul ul {
    background: rgb(38,38,38);
}
div#menu ul ul ul ul {
    background: rgb(35,35,35);
}
/* lava lamp */
div#menu li.back {
    background: url(http://www.zzsky.cn/effect/images/20122/202200/lava.png) no-repeat right -44px !important;
    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/lava.gif);
    width: 13px;
    height: 44px;
    z-index: 8;
    position: absolute;
    margin: -1px 0 0 -5px;
}
div#menu li.back .left {
    background: url(http://www.zzsky.cn/effect/images/20122/202200/lava.png) no-repeat top left !important;
    background-image: url(http://www.zzsky.cn/effect/images/20122/202200/lava.gif);
    height: 44px;
    margin-right: 8px;
}
div#copyright {
    font: 11px 'Trebuchet MS';
    color: #222;
    text-indent: 30px;
    padding: 40px 0 0 0;
}
div#copyright a {
    color: #aaa;
}
div#copyright a:hover {
    color: #222;
}
</style>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202200/jquery.js"></script>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/20122/202200/menu.js"></script>
</head>
<body>
<span style="color:#ffffff;">预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。</span><br>
<!--把下面代码加到<body>与</body>之间-->
<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a>
            <ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul>
        </li>
        <li><a href="#" class="parent"><span>Product Info</span></a>
            <ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>
<div id="copyright">Copyright © 2012 <a href="http://apycom.com" target="_blank">Apycom jQuery Menus</a></div>
</body>
</html>

原文地址：http://www.zzsky.cn/effect/list/5-3.htm

posted @ 2012-10-11 15:35 影像。阅读(209) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Possible.

.net成长之路

两个很炫的导航菜单（转自中国站长天空）

公告