二级下拉式菜单在各大学校站点。电商类站点。新闻类站点等大型？站点非经常见，那么它的实现原理是什么呢？

学习了Web前端开发的知识后，我们是能够实现这种功能的。复杂的都是从基础效果上加入做出来的。原理和流程

还是一样的，今天開始做一些简单的二级下拉式菜单。

横向一级菜单我们见到的非常多。例如以下图所看到的是：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

二级下拉菜单图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

二级下拉菜单是在横向一级菜单的基础上加入下拉效果实现的。制作思路：

第一步：静态网页的制作

标签<ul><li>...</li></ul>项目列表

标签<a>链接

float浮动

display:block属性

postion属性规定元素的定位

第二步：动态特效的实现

下拉菜单的显示与隐藏

今天我们使用CSS样式表实现，那么制作流程是：

1一级菜单设置：设置CSS样式,使一级菜单横向显示,位于一行中。

2二级菜单设置：给”课程大厅”菜单,加入二级菜单(JavScript/JQuery/Ajax三项)，并带链接；同一时候给“学习中心”菜

单，加入二级菜单(视频学习/案例学习/交流平台三项)。也带链接。

3隐藏二级菜单： 设置CSS样式,让二级菜单隐藏。

4显示二级菜单：设置CSS样式,让二级菜单显示。

5浏览器兼容性问题解决以及代码优化，至少測试五个浏览器。我測试的是IE7,8,9。2345浏览器，谷歌浏览器以

及火狐浏览器。

HTML代码部分：

  1. <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>下拉菜单</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="nav" class="nav">
  11.      <ul>
  12. 	          <li><a href="#">站点首页</a></li>
  13. 		  <li><a href="#">课程大厅</a>
  14. 		      <ul>
  15. 			      <li><a href="#">JavaScript</a></li>
  16. 			      <li><a href="#">jQuery</a></li>
  17. 			      <li><a href="#">Ajax</a></li>
  18. 		      </ul>
  19. 		  </li>
  20. 		  <li><a href="#">学习中心</a>
  21. 		      <ul>
  22. 			      <li><a href="#">视频学习</a></li>
  23. 			      <li><a href="#">案例学习</a></li>
  24. 			      <li><a href="#">交流平台</a></li>
  25. 		      </ul>
  26. 		  </li>
  27. 		  <li><a href="#">经典案例</a></li>
  28. 		  <li><a href="#">关于我们</a></li>
  29.      </ul>
  30. </div>
  31. </body>
  32. </html></span>

CSS样式表style.css文件代码：

  1. /*CSS全局设置*/
  2. *{
  3.    margin:0;
  4.    padding:0;
  5. }
  6. .nav{
  7.    background-color:#EEEEEE;
  8.    height:40px;
  9.    width:450px;
  10.    margin:0 auto;
  11. }
  12. /*横向一级菜单样式设置*/
  13. ul{
  14.    list-style:none;
  15. }
  16. ul li{
  17.    float:left;
  18.    line-height:40px;
  19.    text-align:center;
  20.    position:relative;
  21. }
  22. a{
  23.     text-decoration:none;
  24. 	color:#000000;
  25. 	display:block;/*将a行内元素转变成块级元素*/
  26. 	width:90px;
  27. 	height:40px;
  28. }
  29. a:hover{
  30.     background-color:#666666;
  31. 	color:#FFFFFF;
  32. }
  33. /*二级下拉菜单样式设置*/
  34. ul li ul li{
  35.     float:none;
  36. 	background-color:#EEEEEE;
  37. }
  38. ul li ul{
  39.     position:absolute;
  40. 	top:40px;
  41. 	left:0px;
  42. 	display:none;/*默认状态下或鼠标离开时隐藏*/
  43. 	width:90px;
  44. }
  45. /*为了兼容IE7写的CSS样式，可是必须写在a:hover前面*/
  46. ul li ul li a:link,ul li ul li a:visited{
  47.     background-color:#EEEEEE;
  48. }
  49. ul li ul li a:hover{
  50.     background-color:#009933;
  51. }
  52. /*鼠标滑过一级菜单的元素时显示下拉菜单*/
  53. ul li:hover ul{
  54.     display:block;
  55. }

来看一下效果：

1初始化状态或鼠标离开显示为横向一级菜单：

2鼠标滑过有二级下拉菜单的元素时显示下拉菜单：

3显示的下拉菜单中的链接样式：

Web前端开发实战1：二级下拉式菜单之CSS实现的更多相关文章

  1. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  3. Web前端开发实战4：导航菜单(一)

    在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单. 导航菜单种类非常多,可是制作原理都是大同 小异的.这里看的比二级下拉式菜单还简单. 来看一些站点上的导航菜单: 垂直导航菜单: 水平导航菜 ...

  4. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  5. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  6. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  7. 为下拉式菜单(DropDownList)添加第一个选项

    很多方法可以为为下拉式菜单(DropDownList)添加第一个选项,下面是Insus.NET小结了几个方法,仅供参考: Html code: <body>    <form id= ...

  8. 用JavaScript+css制作下拉式菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 下拉式菜单中的内容堆叠（ul型）

    今天使用ul创建下拉式菜单,菜单中的内容堆在了一起. 这是我的html代码 <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. 曹政：CTO这点事

    几乎整个互联网行业都缺 CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找 CTO 的需求,嗯,算下来超过两位数了,光最近一个月就有 3 个,而且这三家都是刚拿 ...

  2. Python 进阶 之 yield

    .转载自:https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ Python yield 使用浅析: 您可能听说过, ...

  3. 常用的WebService一览表

    天气预报Web服务,数据来源于中国气象局Endpoint :http://www.webxml.com.cn/WebServices/WeatherWebService.asmxDisco       ...

  4. 设置iSCSI的发起程序（客户端）（三）

    iSCSI 发起程序是一种用于同 iSCSI 目标器认证并访问服务器上共享的LUN的客户端.我们可以在本地挂载的硬盘上部署任何操作系统,只需要安装一个包来与目标器验证. 初始器客户端设置 功能 可以处 ...

  5. POJ 1776 Task Sequences(竞赛图构造哈密顿通路)

    链接:http://poj.org/problem?id=1776 本文链接:http://www.cnblogs.com/Ash-ly/p/5458635.html 题意: 有一个机器要完成一个作业 ...

  6. NVL NVL2 COALESCE NULLIF decode

    NVL(EXPR1,EXPR2)NVL2(EXPR1,EXPR2,EXPR3)NULLIF(EXPR1,EXPR2)COALESCE(EXPR1,,..,EXPRn)decode --------NV ...

  7. ubuntu　修改权限

    在linux终端先输入ll,可以看到如: -rwx-r–r– (一共10个参数) 表示文件所属组和用户的对应权限. 第一个跟参数属于管理员,跟chmod无关,先不管. 2-4参数:属于user 5-7 ...

  8. 【贪心】Codeforces Round #401 (Div. 2) D. Cloud of Hashtags

    从后向前枚举字符串,然后从左向右枚举位. 如果该串的某位比之前的串的该位小,那么将之前的那串截断. 如果该串的某位比之前的串的该位大,那么之前那串可以直接保留全长度. 具体看代码. #include& ...

  9. [读书笔记]iOS 7 UI设计 对比度

    好久没写随笔了,最近在读<iOS 7 byTutorials>,很不错,推荐给大家. 每一个好的程序员也都是一个设计师,不懂设计的程序员不是好的CTO.哈哈,开个小玩笑. iOS 7设计的 ...

  10. jdk8新特性

    JDK8新特性(JDK8的新特性) * 接口中可以定义有方法体的方法,如果是非静态,必须用default修饰 * 如果是静态的就不用了 class Test { public void run() { ...