实现一级菜单：

<!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. sdut2623--The number of steps（概率dp第一弹，求期望）

    The number of steps Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 Mary stands in a st ...

  2. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  3. ASP.Net MVC概念及基本

    1.1概念 MVC是一种软件设计模式,即:Model(模型).View(视图).Controller(控制器)  .其主要设计目标是将用户接口和逻辑层相分离,以便开发人员更好的关注逻辑层的设计和测试, ...

  4. 使用 Fluent API 配置/映射属性和类型2

    1.将多个实体类映射到数据库中的一个表 要将多个实体映射到一个数据库表需要满足: a. 两个实体必须是一对一关系 b.两个实体共享一个主键 public class MyContext:DbConte ...

  5. 《第一行代码》学习笔记8－活动Activity（6）

    1.返回上一个活动只需要按一下Back键,还有一个startActivityForResult()方法也是 用于启动活动,这个方法期望在活动销毁时能够返回一个结果给上一个活动. 2.startActi ...

  6. uva Fire!

    算法:BFS Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner o ...

  7. ubuntu中安装openssh-server失败（首先ubuntu不能远程root登录）

      ubuntu 安装openssh-server时,报依赖错误   解决方法: 更新软件 sudo apt-get update   如果报校验和不符错误:(此错误为部分网址被墙)如图 解决方法如下 ...

  8. ASP.NET学习笔记——ASP.NET应用程序

    0 剖析ASP.NET应用程序 用户运行ASP.NET应用程序,不是直接运行,而是使用浏览器(比如IE)通过HTTP请求一个特定的URL(如http://www.mysite.com/mypage.a ...

  9. JavaWeb学习笔记--HttpServletRequest、HttpServletResponse对象常用方法

    HttpServletRequest HttpSession session = request.getSession(true); //获取会话对象 Cookie[] cookies = reque ...

  10. MHA环境搭建【3】node相关依赖的解决

    mha的node软件包依赖于perl-DBD-Mysql 这个包,我之前有遇到过用yum安装perl-DBD-MySQL,安装完成后不能正常使用的情况,所以这里选择源码编译安装: perl5.10.1 ...