<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>用javascript下拉式菜单</title>

     <style type="text/css">

         *{

             padding: 0;

             margin: 0;

         }

         body{

             font-family: cursive;

             font-size: 14px;

             background-color:#000 ;

         }

         #navigation ,#navigation li ul{

             list-style-type: none;

         }

         #navigation li{

             float: left;

             text-align: center;

             position: relative;

         }

         #navigation li a:link,#navigation li a:visited{

             text-decoration: none;

             color: #fff;

             width: 82px;

             height: 40px;

             line-height: 40px;

             border: 1px solid #fff;

             border-width:1px 1px 0 0 ;

             background: #255f9e;

             padding-left: 10px;

         }

         #navigation li a:hover{

             color: #fff;

             background: #ffb100;

         }

         #navigation li ul li a:hover{

             color: #fff;

             background: #ffb100;

         }

         #navigation li ul{

             display: none;

             position: absolute;

             top: 40px;

             margin-top: 1px;

             font-size: 12px;

             color: violet;

         }

     </style>

 </head>

 <body>

 <ul id="navigation">

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">小动物</a>

         <ul>

             <li>小猫</li>

             <li>小狗</li>

             <li>小猪</li>

             <li>小强</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">水果</a>

         <ul>

             <li>香蕉</li>

             <li>苹果</li>

             <li>葡萄</li>

             <li>橘子</li>

             <li>梨</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">蔬菜</a>

         <ul>

             <li>大白菜</li>

             <li>芹菜</li>

             <li>花菜</li>

             <li>茄子</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">小零食</a>

         <ul>

             <li>大刀肉</li>

             <li>小鲤鱼</li>

             <li>臭干子</li>

         </ul>

     </li>

     <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">

         <a href="">你想去哪</a>

         <ul>

             <li>不知道</li>

             <li>想知道</li>

             <li>不知哦</li>

             <li>苹果哦</li>

         </ul>

     </li>

 </ul>

 <script type="text/javascript">

     //自定义函数displaySubMenu(li),用于在鼠标指向主菜单时显示菜单项

     function displaySubMenu(li){

         var subMenu=li.getElementsByTagName("ul")[0];

         subMenu.style.display="block";

     }

     //自定义函数hidesubmenu(li),用于在鼠标移开时

     function hideSubMenu(li){

         var subMenu=li.getElementsByTagName("ul")[0];

         subMenu.style.display="none";

     }

 </script>

 </body>

 </html>

用JavaScript+css制作下拉式菜单的更多相关文章

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

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

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

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

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

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

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

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

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

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

  6. html基础——下拉式菜单

    一个网站能否让用户容易使用该网站往往是由菜单栏体现出来,因为它为网页的大多数页面提供功能入口.一个轻轻的点击以后,即可显示出菜单项,将网站的大部分页面和功能显示出来让用户清楚了解从而用户节约一定的时间 ...

  7. Android入门（七）：Spinner下拉式菜单组件

    对于手机和平板电脑的应用程序来说,打字是非常不方便的操作方式,比较好的方式就是列出一组选项让用户挑选,这样就可以避免打字的麻烦.使用Spinner下拉菜单组件需要完成以下几个步骤: 1.建立选项列表, ...

  8. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  9. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

随机推荐

  1. 2018-2019-1 20189210 《LInux内核原理与分析》第八周作业

    一 .可执行程序工作原理 程序编译 预处理:gcc -E hello.c -o hello.i 编译:gcc -S hello.i -o hello.s -m32 汇编:gcc -c hello.s ...

  2. 太原面经分享：如何用js实现返回斐波那契数列的第n个值的函数

    面试攒经验,let's go! 值此高考来临之际,闲不住的我又双叒叕出发去面试攒经验了,去了公司交待一番流程后,面试官甩给了我一张A4纸,上面写着一道js算法笔试题(一开始我并不知道这是在考察js算法 ...

  3. 推荐几种Java任务调度的实现

    几种任务调度的 Java 实现方法与比较--转载 原文:http://www.ibm.com/developerworks/cn/java/j-lo-taskschedule/ 写了一天的作业调度,这 ...

  4. 【OJ】抓牛问题

    /* 农夫John的奶牛跑路了.将地图视作一条数轴,John的初始位置在s而奶牛的位置在t(0<=s,t<=100000).John可以花费一分钟的时间使自己作如下移动: 1 从点x移动到 ...

  5. dlib编译成静态库及被其它程序调用

    一.git下载:https://github.com/davisking/dlib 官网:http://dlib.net/ 二.vs中编译成静态库 1.在vs2015中创建静态库工程(vs2015以上 ...

  6. 线性表->链式存储->双向链表

    文字描述 之前的链表(单链表.循环链表)的链式存储结构中只有一个指示直接后继的指针域.由此,从某个结点出发只能顺指针往后寻查其他结点.若要寻查结点的直接前驱,则需从表头指针出发.即单链表中,NextE ...

  7. FEX(Fabric Extender）

    一.FEX Cisco Nexus 2000 FEX作为N5K.N6K.N7K.FI的一个远程线卡,单独的2K是没有网管功能的,必须配合父系交换机使用. 主要解决TOR和EOR的问题,TOR,接线简单 ...

  8. 连接H3C交换机的Console口连不上

    一.故障:使用Console线连接交换机的Console口连不上. 处理步骤: 1.先把Console线连接好,一端连接交换机的Console口,另一端连接电脑的USB口. 2.安装Console线驱 ...

  9. js中把ajax获取的数据转化成树状结构（并做成多级联动效果）

    1.首先通过ajax获取数据,此处省略,直接贴出获取到的数据格式 var arr = [{ id: 1, name: "一级标题", pid: 0 }, { id: 2, name ...

  10. 【Eclipse】-NO.163.Eclipse.1 -【Eclipse springboot 1.x 创建maven工程初始化报错】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...