<�!doctype html>
<�html lang="en">
<�head>
<�meta charset="UTF-8">
<�title>鄀P枾~CSS+JS黐*傑僓S<�/title>
<�style type="text/css">
.nav{
margin: 0;
padding: 0;
float: left;
list-style: none;
background: #222;
}
.nav a{
color: #ddd;
display: block;
padding: 0 15px;
text-decoration: none;
}
.nav a:hover{
color: #2FAADD;
}
.nav .item{
margin: 0;
padding: 0;
float: left;
height: 35px;
line-height: 35px;
white-space: nowrap;
}
.nav .item-active{
position: relative;
}
.nav .nav{
top: 100%;
left: 0;
display: none;
background: #444;
position: absolute;
border: 1px solid #888;
}
.nav .nav .item{
clear: both;
min-width: 100%;
}
.nav .nav .nav{
top: -1px;
left: 100%;
}
.nav .nav .nav .nav .nav .nav{
left: auto;
right: 100%;
}
<�/style>
<�/head>
<�body>
<�ul class="nav">
<�li class="item"><�a href="#">N黐*? 1<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">孨黐*? 1<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 3<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 4<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">?晞vN黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">孨黐*? 1<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">鬴晞v孨黐*? 3<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#">NO寗v N黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">踁黐*? 1<�/a><�/li>
<�li class="item"><�a href="#">蠀剉坃駇剉踁黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">蠀剉鬴駇剉擭黐*? 0<�/a><�/li>
<�li class="item"><�a href="#">擭黐*? 1<�/a><�/li>
<�li class="item"><�a href="#">擭黐*? 2<�/a><�/li>
<�li class="item"><�a href="#">擭黐*? 3<�/a><�/li>
<�li class="item"><�a href="#">擭黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> Nb楀媭_鎉哊'T<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">b(W鎉箯<�/a><�/li>
<�li class="item"><�a href="#">b w剉(W鎉箯<�/a><�/li>
<�li class="item"><�a href="#">b1\亯V?(W鎉箯<�/a><�/li>
<�li class="item"><�a href="#">hg N3t剉鎉箯}Y,T<�/a><�/li>
<�li class="item"><�a href="#">\T\T ?蔔t^蘏ASN萐亯菑倐<�/a><�/li>
<�li class="item"><�a href="#">筜竳筜竳(W闠虘 ?<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">踁黐*? 3<�/a><�/li>
<�li class="item"><�a href="#">踁黐*? 4<�/a><�/li>
<�li class="item"><�a href="#">踁黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 4<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">N黐*? 3<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">孨黐*? 1<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 3<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 4<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">N黐*? 4<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">孨黐*? 1<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 3<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 4<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">N黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#">孨黐*? 1<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 2<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 3<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 4<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�li class="item"><�a href="#">孨黐*? 5<�/a>
<�ul class="nav">
<�li class="item"><�a href="#"> N黐*? 1<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 2<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 3<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 4<�/a><�/li>
<�li class="item"><�a href="#"> N黐*? 5<�/a><�/li>
<�/ul>
<�/li>
<�/ul>
<�/li>
<�li class="item"><�a target="_blank" href="https://link.nowjava.com?target=https://nowjava.com/">鰁鉔Java R玁f[`N<�/a><�/li>
<�/ul>
<�script type="text/javascript" src="http://demo.nowjava.com/jslib/jquery/jquery-1.9.1.min.js"><�/script>
<�script type="text/javascript">
$(function(){
$('.nav .item').bind({
mouseenter : function(){
$(this).addClass('item-active').children('.nav').show();
},
mouseleave : function(){
$(this).removeClass('item-active').children('.nav').hide();
}
});
});
<�/script>
<�/body>
<�/html>