首页横向下拉二级菜单Jquery代码_计算机软件及应用_IT计算机_专业资料

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

*{margin:0;padding:0;

}div.nav{line-height: 36px;background-color: #333;height:36px;width:960px;margin-right:auto;margin-left:auto;color:#fff;z-index:-1 ;

}div.nav a{color:#999;text-decoration: none;display:block;float:left;text-align: center;padding-right:5px;padding-left:5px;width: 100px;

}div.navul li ul li {line-height:28px;height:28px;

}div.navul{float:left;list-style-type: none;z-index:20;

}div.navul li {float:left;margin-bottom: 5px;/*min-width: 65px;*/

width: 110px;

}div.navul li a:hover{color:#f90;background-color: #ccc;padding-right: 5px;padding-left:5px;

}

.on{background-color: #666;

}div.navul li ul{display: none;

}

</style>

</head>

<body>

<div id="header">

<div class="nav">

<ul class="menulist">

<li id="n0"><a href="default.htm">首页</a></li><li ><a href="#">新闻</a>

<ul>

<li><a href="#">in</a></li>

<li><a href="#">out</a></li>

<li><a href="#">news</a></li>

</ul>

</li>

<li ><a href="#">信息</a>

<ul>

<li><a href="#">info</a></li>

<li><a href="#">education</a></li>

<li><a href="#">mobile</a></li>

</ul>

</li>

<li ><a href="#">社区</a>

<ul>

<li><a href="#">taobao</a></li>

<li><a href="#">amazon</a></li>

<li><a href="#">jd</a></li>

</ul>

</li>

</ul>

</div>

</div>

<scriptsrc="js/jquery-3. 1. 1. js"></script>

<script>

$(document) .ready(function() {menu() ;

} ) ;function menu() {

$(".nav>ul>li:not(#n0)") .hover(function() {$(".nav>ul>li:not(#n0)") .removeClass("on") ;$(this) .addClass("on") ;

$(this) .find("ul") . show() ;

} ,function() {

$(this) .removeClass("on") ;

$(this) .find("ul") .hide() ;

} )

}

</script>

</body>

</html>