<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
//导入jQuery的库
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<title>下拉菜单</title>
<style>
//静态界面的布局
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.all {
900px;
height:40px;
margin: 100px auto 0;
background-color:lightslategray;
border-radius: 10px;
padding-left: 10px;
padding-bottom: 3px;
}
.all li {
float: left;
140px;
height: 40px;
margin-right: 10px;
position: relative;
margin-top: 3px;
}
.all a {
color: white;
text-decoration: none;
display: block;
140px;
height: 40px;
text-align: center;
line-height: 40px;
background-color:lightslategray;
font-size: 18px;
border-radius: 10px;
}
.all li ul {
position: absolute;
display: none;
}
.all a:hover{
color: red;
}
</style>
<script>
//jQuery部分，当我移动到 无序列表上的时候让隐藏的部分显示出来
$(document).ready(function () {
$(".all li").hover(function () {
$(this).children("ul").slideToggle();
});
});
</script>
</head>
<body>
//静态界面的搭建
<div class="all">
<ul>
<li><a href="#">官网首页</a>
<ul>
<li><a href="#">新手指引</a></li>
<li><a href="#">资料库</a></li>
<li><a href="#">攻略中心</a></li>
<li><a href="#">模式实验室</a></li>
<li><a href="#">海克斯战利品库</a></li>
</ul>
</li><li>
<a href="#">商城/合作</a>
<ul>
<li><a href="#">点券充值</a></li>
<li><a href="#">道聚城</a></li>
<li><a href="#">周边商城</a></li>
<li><a href="#">英雄联盟画册</a></li>
<li><a href="#">网吧特权</a></li>
<li><a href="#">LOL信用卡</a></li>
</ul>
</li><li>
<a href="#">用户互动</a>
<ul>
<li><a href="#">在线服务</a></li>
<li><a href="#">活动中心</a></li>
<li><a href="#">官方论坛</a></li>
<li><a href="#">官方微信</a></li>
<li><a href="#">官方微博</a></li>
</ul>
</li><li>
<a href="#">赛事中心</a>
<ul>
<li><a href="#">LPL职业联赛</a></li>
<li><a href="#">甲级职业联赛</a></li>
<li><a href="#">德玛西亚杯</a></li>
<li><a href="#">城市英雄争霸赛</a></li>
<li><a href="#">高校联赛</a></li>
<li><a href="#">校际精英赛</a></li>
</ul>
</li><li>
<a href="#">自助系统</a>
<ul>
<li><a href="#">封号查询</a></li>
<li><a href="#">体验服申请</a></li>
<li><a href="#">服务器状态查询</a></li>
<li><a href="#">裁决之镰</a></li>
</ul>
</li><li>
<a href="#">个人中心</a>
<ul>
<li><a href="#">个人资料</a></li>
<li><a href="#">我的英雄与皮肤</a></li>
<li><a href="#">战绩历史</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果图
