<!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. ajax 传递中文字符参数 问题

    使用ajax 传递中文字符串时, 服务端会接收不到预期的 中文字符. 此时,需要对 js中的中文字符参数进行 编码,  到达服务端后, 再为其解码 即可. 前端: var url = '....'; ...

  2. 添加spring-boot-devtools热部署报错

    使用的eclipse部署的spring boot,百度了下,大部分的问题都是说IDE工具使用热部署无法成功的解决方案,看了很懵逼 <!-- 热部署模块 --> <dependency ...

  3. jquery easyui datagrid 如何第一次点击列标题时是降序排列

    使用 EasyUI的onBeforeLoad事件,在发回到服务器查询之前,修改排序和对应的图标样式. 1.配置回调函数 data-options='onBeforeLoad:fnOnBeforeLoa ...

  4. 【转】tars源码漫谈第1篇------tc_loki.h (牛逼哄哄的loki库)

    loki库是C++模板大牛Andrei写的, 里面大量运用模板的特性, 而tc_loki.h借用了loki库的部分代码, 形成了一个基本的文件tc_loki.h, 来看看: #ifndef __TC_ ...

  5. python基础4 input()函数

    input()函数 赋值输出: name=input('请求输入你喜欢的电影名:')print(name+'是我最喜欢的电影!') 输入:大话西游 输出:大话西游是我最喜欢的电影! print('那么 ...

  6. struct与class的区别

    C++中的struct是对C中struct的扩充,它已经不再只是一个包含不同数据类型的数据结构,因为其扩充了太多功能.总的来说,C++中struct和class极其相似,比如,struct能包含成员函 ...

  7. springBoot生成日志文件

    一.安装lombok 说明: 安装bomlok后model可以不用写get.set方法,slf4j日志直接使用log打印 1. Maven Repository中下载lombok.jar 2. 将lo ...

  8. JS 全选

    第一种情况 1. 首先得有全选  checkall <input type="checkbox" class="checkAll" value=" ...

  9. centos禁ping

    Linux默认是允许Ping响应的,系统是否允许Ping由2个因素决定的:A.内核参数,B.防火墙,需要2个因素同时允许才能允许Ping,2个因素有任意一个禁Ping就无法Ping. 具体的配置方法如 ...

  10. JAVA学习笔记 （okHttp3的用法）

    最近的项目中有个接口是返回文件流数据,根据我们这边一个验签的插件,我发现里面有okHttpClient提供了Call.Factory,所以就学习了下okHttp3的用法. 1.概述 okhttp是一个 ...