实现一级菜单：

<!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实现一级菜单和二级菜单学习笔记的更多相关文章

  1. CSS导航菜单（二级菜单）

    index.html <div class="nav"> <ul> <li> <a href="#">Java& ...

  2. MyBatis的一级缓存和二级缓存简介笔记

    关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...

  3. QT之二级菜单（二级菜单的箭头可以使用QSS设置图片）

    QT之二级菜单 QT之二级菜单 开场白 效果图 上代码 可参考文章 下代码 结尾 开场白 今天我们一起来了解下,在我们QT中,二级菜单是如何实现的,在上篇我们学习了QT之系统托盘,QT之自定义菜单,  ...

  4. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  5. crm 一级菜单排序,二级菜单选中并且展开,非菜单权限的归属,权限粒度控制到按钮级别

    排序 /rbac/templatetags/rbac.py from django import template from django.conf import settings import re ...

  6. 《精通CSS：高级Web标准解决方案》学习笔记（下）

    1. background-position: left center; 两个参数分别是x和y轴方向的position 2. background-position: 10% 20%; 用百分数表示时 ...

  7. 《精通CSS：高级Web标准解决方案》学习笔记（上）

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  8. CSS规范—分类方法（NEC规范学习笔记）

    一.CSS文件的分类和引用顺序 Css按照性质和用途,将Css文件分成“公共型样式”.“特殊型样式”.“皮肤型样式”,并以此顺序引用,有需要可以添加版本号 1.公共型样式:包含以下几个部分 标签的重置 ...

  9. CSS+HTML网页设计与布局（学习笔记1）

    1.在宽度未知时,使div块居中,可以添加以下属性: display:table;margin:0 auto;

随机推荐

  1. mogodb亿万级数据性能測试

    本机 i7四核 8G 废话少说 mogodb 最像sql的nosql 使用批量插入一次20万循环10次总共200万数据用时65秒(尝试一次50万只是报内存溢出了,原因未知) 插入2000万数据用时10 ...

  2. hdu 5080 2014ACM/ICPC鞍山K题 polya计数

    首先,中心点是能够直接算出来的 把全部的坐标相加再除n就能够 然后枚举一个不靠近中心的点,枚举它绕中心点旋转的角度.仅仅要枚举50次就能够了 计算出当前枚举的的角度能否形成一个置换群 计算循环节,再用 ...

  3. [转]iOS开发使用半透明模糊效果方法整理

    转自:http://www.molotang.com/articles/1921.html 虽然iOS很早就支持使用模糊效果对图片等进行处理,但尤其在iOS7以后,半透明模糊效果得到大范围广泛使用.包 ...

  4. Android的启动模式

    启动模式简单地说就是Activity启动时的策略,在AndroidManifest.xml中的<Activity>标签的android:launchMode属性设置: 启动模式有4种,分别 ...

  5. Android入门2：从GridView控件使用到自定义Adapter

    在日常手机app的使用中,出现频率最高的便是ListView和GridView.ListView的例子是微信主界面,而GridView的例子则是支付宝的主界面,不明白的小伙伴打开手机便一目了然.然而这 ...

  6. javascript判断键盘按键

    window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : window ...

  7. 【原创】C++中对象的序列化

    1.对象序列化 对象的序列化是指将对象的状态信息转换为可以存储或者传输的形式的过程.对象的反序列化是与序列化相反的过程. 在序列化期间,对象将其当前的状态写入到临时或者永久性的存储区,可以通过从存储区 ...

  8. vs UNICODE 零散的笔记

    string--->CString #ifdef UNICODE#define Tstring wstring#else#define Tstring string#endif 可以这样转换CS ...

  9. js判断是否为空的代码

    方法一: var keyVal= $("#key").val(); if(keyVal==undefined || keyVal=="" || keyVal== ...

  10. iotop

    iotop命令是专门显示硬盘IO的命令,界面风格类似top命令.这个命令只有在kernelv2.6.20及以后的版本中才有.   1.直接yum安装,rh6的光盘里有包. yum install io ...