二つのとても華やかなナビゲーションメニュー（中国駅から空に変えてください）
150873 ワード
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