<!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. WebService的两种方式SOAP和REST有什么不同？

    REST API 优点: 1. 轻量级的解决方案,不必向SOAP那样要构建一个标准的SOAP XML. 2. 可读性比较好:可以把URL的名字取得有实际意义. 3. 不需要SDK支持:直接一个Http ...

  2. Codeforces Round #509 (Div. 2)

    咕咕咕了好多天终于有时间写篇博客了_(:з」∠)_ 打网赛打到自闭的一周,终于靠这场CF找回了一点信心... 1041A - Heist \(ans=max\left \{ a_i \right \} ...

  3. OO第三次博客作业

    一.规格化的发展历史 最早的程序设计都是面向机器,从一开始使用的机器语言,到后面的汇编语言,都是面向机器的语言,编写困难也容易出错.随着需求的发展,程序的编写从面向机器走向面向过程,但由于goto语句 ...

  4. PHP算法学习（3） 冒泡排序

    2019年1月15日10:49:52 <?php /* * 冒泡排序 */ class BubbleSort { /* * 基础排序 */ public static function Basi ...

  5. 关于HTTP协议学习（二）

    一,目录结构 HTTP Cookie & Session HTTP Cache (缓存) 二,HTTP Cookie & Session 1. 我们看到的 cookie 我们通过浏览器 ...

  6. linux怎么查看进程启动,用户的工作目录,pwdx,/proc/11256/cwd

    linux 通过pid 寻找程序路径的最简单命令(pwdx)  #pwdx  pid号1  [pid2] .... 在linux实际操作命令中,查看pid的方式有很多种,通过pid找程序路径的方式也有 ...

  7. 做一个有产品思维的研发：部署（Tomcat配置，Nginx配置，JDK配置）

    每天10分钟,解决一个研发问题. 如果你想了解我在做什么,请看<做一个有产品思维的研发:课程大纲>传送门:https://www.cnblogs.com/hunttown/p/104909 ...

  8. sping_依赖注入的三种方式

    1.  set注入:通过setxxx()给属性赋值 <!--id是对象--> <!--class是类--> <bean id = "student" ...

  9. mysql获取连接connection失败

    好久不写jdbc了,今天写了个小东西,数据库连接失败,错误信息如下: java.sql.SQLException: The server time zone value '???ú±ê×??±??' ...

  10. 快速学习C语言途径，让你少走弯路

    1.标准C语言能干什么? 坦白讲,在今天软件已经发展了半个多世纪,单纯的C语言什么都干不了.标准C语言库只提供了一些通用的逻辑运算方法以及字符串处理,当然字符串在C语言看来也是一种操作内存的方法,所以 ...