实现一级菜单：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body{
font-family: "宋体";
font-size: 12px;
line-height: 1.5;
}
a{
color:#000;
}
a:HOVER{
color:#F00;
}
.menu{
width:100px;
border:1px solid #CCC;
/* border:1px solid red; */
background-color: silver;
}
.menu ul{
margin:0px;
padding:0px;
background-color: pink;
}
.menu li{
list-style-type: none;
background-color: #eee;
padding:0px 8px;
height:26px;
line-height: 26px;
border-bottom:1px solid #CCC;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版布局</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css实例</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>
</div>
</body>
</html>
显示效果：
二级菜单的实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");/* 得到id */
var allli = navRoot.getElementsByTagName("li");/*得到li所有的元素 */
for (var i=0; i<allli.length; i++) {
var node = allli[i];
node.onmouseover=function() {/*注册函数 */
this.className+=" current";
};
node.onmouseout=function() {/*注册函数 */
this.className=this.className.replace(" current", "");
};
}
}
};
window.onload=startList;/* 加载完毕，执行 */
</script>
<style type="text/css">
body{
font-family: "宋体";
font-size: 15px;/* 字体的大小 */
line-height: 1.5;/* line-height 属性设置行间的距离（行高）。 */
}
a{
color:#f0f;/*正常的a标签的字体元素 */
text-decoration: none;/* 取消下划线 */
}
/*鼠标悬浮时，字体的颜色 */
a:HOVER{
color:#F00;
}
/* id为menu的菜单 */
#menu{
width:200px;/*设置宽度 */
/* border:1px solid #CCC; */
border:2px solid blue;/* 设置边框 */
/* background-color: silver; */
background-color: red; /*背景颜色为红色 */
border-bottom: none;/*下边框的宽度 */
}
#menu ul{
margin:0px;/*ul的外边距 */
padding:0px;/*ul的内边距 */
width:120px;/* 块元素的宽度 */
background-color: pink;/*设置背景颜色 */
}
#menu ul li{
list-style-type: none;
background-color: #eee;
/* background-color: red; */
width:90px;
padding:0px 8px;
height:26px;
line-height: 26px;
border-bottom:1px solid #CCC;
/* border-bottom:1px solid red; */
position:relative;
}
#menu ul li ul{
position:absolute;/*绝对定位 */
left:100px;/* 向右移动100px */
top:0px;/* 向下移动0px */
display:none;/*默认不显示 */
width:100px;/*宽度 */
border:1px solid #CCC;/* 边框 */
border-bottom: none;
}
#menu ul li.current ul{
display:block;/*以块元素显示 */
}
#menu ul li:hover ul{
display:block;/*以块元素显示 */
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="@#">首页</a></li>
<li><a href="#">网页版布局</a>
<ul>
<li><a href="#">自适用宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门教程</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</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>
</div>
</body>
</html>
显示效果如下：
代码里面都有注释，就不做过多的解释了。
http://blog.csdn.net/j903829182/article/details/38735639
html和css实现一级菜单和二级菜单学习笔记,布布扣,bubuko.com
原文地址：http://blog.csdn.net/j903829182/article/details/38735639
