纯css js html超级简洁菜单联动特效适合网站导航栏使用

先看看GIF效果展示 

 

 纯css js html超级简洁菜单联动特效适合网站导航栏使用

<style>
/* CSS 重置 */
* {padding:0;margin:0;border:0;font-weight:normal;line-height:150%;}
ol,ul,li {list-style:none;}
body{height:100%;font-size:14px;color:#333;-webkit-text-size-adjust:none;}
#header,#content,#footer {display:block;margin:0 auto;width:1199px;}
a{text-decoration:none;color:#333;}
a:hover{color:#333;text-decoration:none;}

#header,#main,#footer{margin:0px auto;width:1199px;display:block;}
#header{background:#fff;height:38px;line-height:38px;border-bottom:2px solid #ccc;z-index:3;}
#header .logo{font-style:italic;padding:0 0 0 8px;font-size:14px;font-weight:600;color:green;}
#header .logo b{height:38px;line-height:38px;font-weight:900;font-size:20px;color:#0180CF;}
#menu{float:right;height:36px;line-height:36px;margin:0 auto;padding:0 8px 0 0;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu ul li{float:left;margin-left:1px;min-width:88px;}
#menu ul li a{display:block;border:1px solid white;padding:0 15px;height:36px;line-height:36px;text-align:center;}
#menu ul li a:hover{border:1px solid #ccc;background:#0180CF;color:white;}
#menu ul li ul{background:white;z-index:5;display:none;top:37px;border:1px solid #ccc;position:absolute;}
#menu ul li ul li{float:none;background:#eee;margin:0;}
#menu ul li ul li a{background:white;border-bottom:1px solid #ccc;overflow:hidden;}
#menu ul li ul li a:hover{background:#0180CF;color:white;border-bottom:1px solid #ccc;}
#menu ul li:hover ul{display:block;}
</style>
<div class="nav">
<div id="menu">
<ul>
<li><a href="#">网页版直接精准查</a>
<ul><li><a href="http://add.12391.net/?type=cha&isde=0&ismo=1">多条件多输入框都输对</a></li>
<li><a href="http://add.12391.net/?type=xun&isde=0&ismo=1">多条件多输入框都输对旧网页版</a></li>
<li><a href="http://add.12391.net/?type=sai&isde=0&ismo=1">多条件多输入框任输多个</a></li>
<li><a href="http://add.12391.net/?type=sox&isde=0&ismo=1">多条件下拉框选条件版</a></li>
<li><a href="http://add.12391.net/?type=sos&isde=0&ismo=1">多条件下拉框选条件版带输入提示</a></li>
<li><a href="http://add.12391.net/?type=sas&isde=0&ismo=1">条件多输入框任输多个带输入提示</a></li>
<li><a href="http://add.12391.net/?type=soo&isde=0&ismo=1">多条件单输入框任输一</a></li>
</ul>
</li>

<li><a href="#">网页版登录精准查</a>
<ul><li><a href="http://add.12391.net/?type=dec&isde=1&ismo=1">登录免输入查自己</a></li>
<li><a href="http://add.12391.net/?type=sai&isde=1&ismo=1">多条件多输入框任输多个</a></li>
<li><a href="http://add.12391.net/?type=sox&isde=1&ismo=1">多条件下拉框选条件版</a></li>
<li><a href="http://add.12391.net/?type=sos&isde=1&ismo=1">多条件下拉框选条件版带输入提示</a></li>
<li><a href="http://add.12391.net/?type=sas&isde=1&ismo=1">条件多输入框任输多个带输入提示</a></li>
<li><a href="http://add.12391.net/?type=soo&isde=1&ismo=1">多条件单输入框任输一</a></li>
<li><a href="http://add.12391.net/?type=cha&isde=1&ismo=1">多条件多输入框都输对</a></li>
<li><a href="http://add.12391.net/?type=xun&isde=1&ismo=1">多条件多输入框都输对旧网页版</a></li>
</ul>
</li>

<li><a href="#">网页版直接模糊搜</a>
<ul><li><a href="http://add.12391.net/?type=soo&isde=0&ismo=0">多条件单输入框任输一</a></li>
<li><a href="http://add.12391.net/?type=sai&isde=0&ismo=0">多条件多输入框任输多个</a></li>
<li><a href="http://add.12391.net/?type=sox&isde=0&ismo=0">多条件下拉框选条件版</a></li>
<li><a href="http://add.12391.net/?type=sos&isde=0&ismo=0">多条件下拉框选条件版带输入提示</a></li>
<li><a href="http://add.12391.net/?type=sas&isde=0&ismo=0">条件多输入框任输多个带输入提示</a></li>
</ul>
</li>

<li><a href="#">网页版登录模糊搜</a>
<ul><li><a href="http://add.12391.net/?type=soo&isde=1&ismo=0">多条件单输入框任输一</a></li>
<li><a href="http://add.12391.net/?type=sai&isde=1&ismo=0">多条件多输入框任输多个</a></li>
<li><a href="http://add.12391.net/?type=sox&isde=1&ismo=0">多条件下拉框选条件版</a></li>
<li><a href="http://add.12391.net/?type=sos&isde=1&ismo=0">多条件下拉框选条件版带输入提示</a></li>
<li><a href="http://add.12391.net/?type=sas&isde=1&ismo=0">条件多输入框任输多个带输入提示</a></li>
</ul>
</li>

<li><a href="#">聊天式直接精准查</a>
<ul><li><a href="http://add.12391.net/?type=api&isde=0&ismo=1">多条件任发一聊天发送查询</a></li>
</ul>
</li>

<li><a href="#">聊天式绑定精准查</a>
<ul><li><a href="http://add.12391.net/?type=ban&isde=2&ismo=1">聊天式绑定查询本人信息版</a></li>
</ul>
</li>

<li><a href="#">网页版密码精准查</a>
<ul><li><a href="http://add.12391.net/?type=cha&isde=3&ismo=1">多条件多输入框都输对</a></li>
<li><a href="http://add.12391.net/?type=xun&isde=3&ismo=1">多条件多输入框都输对旧网页版</a></li>
<li><a href="http://add.12391.net/?type=sai&isde=3&ismo=1">多条件多输入框任输多个</a></li>
<li><a href="http://add.12391.net/?type=sox&isde=3&ismo=1">多条件下拉框选条件版</a></li>
<li><a href="http://add.12391.net/?type=sos&isde=3&ismo=1">多条件下拉框选条件版带输入提示</a></li>
<li><a href="http://add.12391.net/?type=sas&isde=3&ismo=1">条件多输入框任输多个带输入提示</a></li>
<li><a href="http://add.12391.net/?type=soo&isde=3&ismo=1">多条件单输入框任输一</a></li>
</ul>
</li>

<li><a href="#">网页版密码模糊搜</a>
<ul><li><a href="http://add.12391.net/?type=soo&isde=3&ismo=0">多条件单输入框任输一</a></li>
<li><a href="http://add.12391.net/?type=sai&isde=3&ismo=0">多条件多输入框任输多个</a></li>
<li><a href="http://add.12391.net/?type=sox&isde=3&ismo=0">多条件下拉框选条件版</a></li>
<li><a href="http://add.12391.net/?type=sos&isde=3&ismo=0">多条件下拉框选条件版带输入提示</a></li>
<li><a href="http://add.12391.net/?type=sas&isde=3&ismo=0">条件多输入框任输多个带输入提示</a></li>
</ul>
</li>

</ul>
 </div>
</div>

<script type="text/javascript">
function menuFix(){
  var sfEls=document.getElementById("menu").getElementsByTagName("li");
  for (var index=0;index<sfEls.length;index++){
    sfEls[index].onmouseover=function(){
      this.className+=(this.className.length > 0 ? " " : "") + "sfhover";
    }
    sfEls[index].onmouseout=function(){
      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
    }
  }
}
window.onload = menuFix;
</script>