-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-07-25
来源 ：
阅读 1647
评论 0
摘要：本篇HTML5教程探讨了如何实现向右方向的二级菜单，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作二级菜单</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
line-height: 1.5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #ccc;
width: 100px;
}
#menu ul li {
background-color: #eee;
height: 26px;
line-height: 26px;
border-bottom: 1px solid #ccc;
}
#menu ul li a {
color: #000;
text-decoration: none;
}
#menu ul li a:hover {
color: #ff0000;
}
#menu ul li ul {
display: none;
position: absolute;
left: 100px;
top: 0px;
}
#menu ul li.current ul {
display: block;
}
</style>
<script type="text/javascript">
startList = function () {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li");
for (i = 0; i < allli.length; i++) {
node = allli[i];
node.onmouseover = function () {
this.className += "current";
}
node.onmouseout = function () {
this.className = this.className.replace("current", "");
}
}
}
window.onload = startList;
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">PS</a>
<ul>
<li><a href="#">二级菜单列表1</a></li>
<li><a href="#">二级菜单列表2</a></li>
</ul>
</li>
<li><a href="#">Jave</a>
<ul>
<li><a href="#">二级菜单列表5</a></li>
<li><a href="#">二级菜单列表6</a></li>
<li><a href="#">二级菜单列表7</a></li>
<li><a href="#">二级菜单列表8</a></li>
<li><a href="#">二级菜单列表8</a></li>
</ul>
</li>
<li><a href="#">php</a>
<ul>
<li><a href="#">二级菜单列表9</a></li>
<li><a href="#">二级菜单列表10</a></li>
<li><a href="#">二级菜单列表11</a></li>
<li><a href="#">二级菜单列表12</a></li>
</ul>
</li>
<li><a href="#">.net</a>
<ul>
<li><a href="#">二级菜单列表13</a></li>
<li><a href="#">二级菜单列表14</a></li>
<li><a href="#">二级菜单列表15</a></li>
<li><a href="#">二级菜单列表16</a></li>
<li><a href="#">二级菜单列表15</a></li>
<li><a href="#">二级菜单列表16</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
本文由职坐标整理发布，学习更多的HTML5/CSS3相关知识，请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
