html和css实现一级菜单和二级菜单学习笔记

浏览数：19 / 时间：2015年06月09日

实现一级菜单：

<!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>

显示效果如下：