实现一级菜单：

<!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. 【leetcode】Merge k Sorted Lists(按大小顺序连接k个链表)

    题目:Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...

  2. Internetmap.apk实现原理分析

    1.本地实现调用 程序根据data文件目录下的asinfo.json文件(包含自治域网络名和对应的坐标值),调用so文件绘制asn结点图(ASN,AutoSystemNode,自治域结点) 2.路由查 ...

  3. iCIBA简单案例

    效果图: 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> < ...

  4. WebApi实现跨域功能

    在配置文件的system.webServer节点中加入以下配置信息 <httpProtocol> <customHeaders> <add name="Acce ...

  5. Tomcat项目部署方式

    一.静态部署 1.直接将web项目文件件拷贝到webapps 目录中      Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.所以可以将JS ...

  6. 0301——Notification 通知

    注册消息 [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(方法) name:@"消息名字&q ...

  7. NSLog设置不打印

    在调试应用程序的时候经常需要进行打印需要的信息,但是当打印的地方多了之后在真机上跑应用程序就会相应的慢很多,输出语句多了之后会在很大程序上影响应用程序的性能.这里我们可以定义一个宏来控制是否输出调试信 ...

  8. cocos2dx 音效 粒子 数据存储

    1.音效 引入头文件 #include "simpleAudioEngine.h" 命名空间 using namespace CocosDenshion; //创建一个背景 Siz ...

  9. mac中遇到的mysql编码问题

    由于项目有需要支持表情包输入数据库,自己做了一下技术测试,修改了my.cnf的权限为777.结果就操蛋了.编码错误.... 直到我无意地输入mysql -h,提示我/etc/my.cnf被忽略的一段话 ...

  10. 17 java 存在的问题（转）

    java的问题: 1.性能:java的内存管理似乎比较自动化,但其实性能不是特别好.尤其是new对象的时候没有节制.在java中,有些对象构造成本很低,有些 很高.特别在UI编程的时候,大多数的UI对 ...