实现一级菜单：

<!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. 读书笔记-HBase in Action-第二部分Advanced concepts-(2)Coprocessor

    Coprocessor是HBase 0.92.0引入的特性.使用Coprocessor.能够将一些计算逻辑下推到HBase节点,HBase由一个单纯的存储系统升级为分布式数据处理平台. Coproce ...

  2. 初探HTML

    就在今天我抱着试一试的态度稍微看了下HTML5, 尝试着接触一点新知识, 虽然学的并不多, 但是还是异常的兴奋, 感觉有好多东西和之前的不一样了, 包括控件的创建和一些属性的设置等, 总之这些变化与改 ...

  3. telnet IP不通/sybase central工具无法连接到数据库

    问题描述:客户端sybase central工具无法连接到数据库 服务端操作系统:RHEL5.8_x64,安装sybase-ASE15.7,端口号4112  IP:192.168.1.220  hos ...

  4. WebApi实现跨域功能

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

  5. respondsToSelector的使用

    - (BOOL)respondsToSelector:(SEL)aSelector; 用来判断是否有以某个名字命名的方法 +(BOOL) instancesRespondToSelector: sel ...

  6. css3之gradient

    radial-gradient The CSS radial-gradient() function creates an <image> which represents a gradi ...

  7. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  8. Mysqldump记录

    MySql导出特定的一段记录(导出为SQL语句) mysqldump –u root -p 数据库名 表名 --where=" author like '%Joking%' " & ...

  9. Unity3D TouchScript 插件教程一

    只是个人学习小记,谈不上教程,但是为了命中搜索引擎关键词,只好装逼了:),可能对于大家来说太简单了吧,网上中文教程没搜到 ,只好自己摸索了. 插件资源下载地址:https://www.assetsto ...

  10. ubuntu vim YCM

    http://blog.sina.com.cn/s/blog_499386b00100rxm1.html http://www.cnblogs.com/junnyfeng/p/3633697.html