不错的js+css导航菜单特效，这个菜单特效经典实用，当用户的鼠标经过时切换显示，可根据自己的需求来修改。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>一款经典实用js+css黑色风格导航菜单_武鸣人</title>
<style>
strong {
font-style: normal;
font-weight: normal;
font-weight: bold;
}
a {
cursor: pointer;
text-decoration: none;
}
#container {
width: 960px;
margin: 0pt auto;
}
#nav, .nav_con_wwwwumingren, .nav_con_wwwwumingren ul, #nav .nav_wuming_a:hover, #nav .nav_wuming_a:hover strong, #nav li.current .nav_wuming_a strong, #nav li.current .nav_wuming_a, #nav .nav-sub a:hover, #nav .nav-sub a:hover span {
background-image: url('/img/20240423_www_wuming_ren_22.gif');
background-repeat: no-repeat;
}
#nav {
position: relative;
height: 66px;
margin: 5px 0pt 0pt;
background-position: 0pt -230px;
background-repeat: repeat-x;
}
.nav_con_wwwwumingren {
padding-left: 15px;
height: 66px;
background-position: 0pt 0pt;
}
.nav_con_wwwwumingren ul {
height: 100%;
background-position: right -66px;
}
.nav_con_wwwwumingren ul ul.nav-sub {
background: none repeat scroll 0% 0% transparent;
height: auto;
}
.nav_wuming {
display: block;
float: left;
height: 36px;
width: 100px;
line-height: 36px;
text-align: center;
padding-right: 4px;
}
.nav_wuming_a {
display: block;
font-size: 14px;
height: 26px;
line-height: 26px;
overflow: hidden;
background: none repeat scroll 0% 0% transparent;
text-decoration: none;
margin-top: 5px;
}
.nav_wuming_a strong {
display: block;
color: rgb(255, 255, 255);
height: 100%;
}
li.current .nav_wuming_a strong, #nav li.current .nav_wuming_a:hover strong {
color: rgb(0, 0, 0);
}
.nav_wuming_a:hover {
text-decoration: none;
background-position: 0pt -315px;
}
.nav_wuming_a:hover strong {
background-position: right -360px;
}
#nav li.current .nav_wuming_a strong {
background-position: right -180px;
padding-top: 2px;
}
#nav li.current .nav_wuming_a {
background-position: 0pt -131px;
overflow: hidden;
color: rgb(0, 0, 0);
height: 31px;
}
#nav li.current .nav_wuming_a:hover strong {
color: rgb(0, 0, 0);
}
ul.nav-sub {
position: absolute;
width: 920px;
text-align: left;
top: 38px;
left: 20px;
display: none;
padding: 2px 0pt 0pt;
background: none repeat scroll 0% 0% transparent;
}
#nav .current .nav-sub {
display: block;
}
.nav-sub li {
float: left;
display: block;
width: 78px;
text-align: center;
height: 30px;
overflow: hidden;
margin-right: 4px;
}
#nav .nav-sub a {
display: block;
height: 22px;
overflow: hidden;
color: rgb(77, 77, 77);
text-decoration: none;
}
#nav .nav-sub a span {
display: block;
line-height: 22px;
height: 22px;
}
#nav .nav-sub a:hover {
background-position: 0pt -405px;
}
#nav .nav-sub a:hover span {
background-position: right -446px;
}
.sp-nav {
overflow:hidden;
background: url(/img/20240423_www_wuming_ren_22.gif) repeat-x 0 -595px;
height:31px;
line-height:31px
}
.sp-con {
color:#CCC;
margin:0 auto;
width:968px;
}
.sp-l {
overflow:hidden;
float:left;
background:url(/img/20240423_www_wuming_ren_22.gif) no-repeat 0 -558px;
width:6px;
height:31px
}
.sp-r {
overflow:hidden;
float:right;
background:url(/img/20240423_www_wuming_ren_22.gif) no-repeat -6px -558px;
height:31px;
width:6px;
}
.sp-m {
position:relative;
padding:0 10px;
float:left;
background:url(/img/20240423_www_wuming_ren_22.gif) repeat-x 0 -495px;
height:31px;
line-height:31px;
width:936px;
color:#000;
text-align: left;
}
.other {
float: left;
height: 23px;
margin-right: 22px;
display: inline;
}
.so {
float: right;
padding-top: 6px;
height: 26px;
}
.so .inputstyleso {
width: 89px;
height: 16px;
line-height: 16px;
border: 1px solid rgb(190, 190, 190);
float: left;
padding-top: 2px;
padding-left: 5px;
}
.so img {
float: left;
margin: 2px 4px 0pt 0pt;
display: inline;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<script language="javascript">
var wwwwumingren;
var ctime=300;/* 设置延时0.3秒 */
function change_wuming_ren_1(num_wuming){
clearTimeout(wwwwumingren);
wwwwumingren=window.setTimeout("change_wuming_ren_2("+num_wuming+");",ctime);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function change_wuming_ren_2(num_wuming){
clearTimeout(wwwwumingren);
for(var id = 0;id<=8;id++)
{
if(id==num_wuming)
{
document.getElementById("wuming_id_"+id).style.display="block";
document.getElementById("nav_wuming_id_"+id).className="nav_wuming current";
}
else
{
document.getElementById("wuming_id_"+id).style.display="none";
document.getElementById("nav_wuming_id_"+id).className="nav_wuming";
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<div id="nav">
<div class="nav_con_wwwwumingren">
<ul>
<li class="nav_wuming current" id="nav_wuming_id_0"><a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(0)"><strong>特效首页</strong></a>
<ul class="nav-sub" id="wuming_id_0">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_1"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(1)"><strong>一号特效</strong></a>
<ul class="nav-sub" id="wuming_id_1">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_2"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(2)"><strong>二号特效</strong></a>
<ul class="nav-sub" id="wuming_id_2">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_3"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(3)"><strong>三号特效</strong></a>
<ul class="nav-sub" id="wuming_id_3">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_4"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(4)"><strong>四号特效</strong></a>
<ul class="nav-sub" id="wuming_id_4">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_5"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(5)"><strong>五号特效</strong></a>
<ul class="nav-sub" id="wuming_id_5">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_6"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(6)"><strong>六号特效</strong></a>
<ul class="nav-sub" id="wuming_id_6">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_7"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(7)"><strong>七号特效</strong></a>
<ul class="nav-sub" id="wuming_id_7">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
<li class="nav_wuming" id="nav_wuming_id_8"> <a class="nav_wuming_a" href="https://www.wuming.ren" onMouseOut="clearTimeout(wwwwumingren);" onMouseOver="javascript:change_wuming_ren_1(8)"><strong>八号特效</strong></a>
<ul class="nav-sub" id="wuming_id_8">
<li><a href="https://www.wuming.ren"><span>武鸣一号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣二号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣三号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣四号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣五号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣六号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣七号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣八号</span></a></li>
<li><a href="https://www.wuming.ren"><span>武鸣九号</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处