<!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. <c:forEach var="role" items="[entity.Role@d54d4d, entity.Role@1c61868, entity.Role@6c58db, entity.Role@13da8a5]"> list 集合数据转换异常

    <c:forEach var="role" items="[entity.Role@d54d4d, entity.Role@1c61868, entity.Role ...

  2. 网络编程之socketserver以及socket更多方法

    关于socketserver 关于socket的更多方法 服务端套接字函数: s.bind() 绑定(主机,端口号)到套接字 s.listen() 开始tcp监听 s.accept () 被动接受tc ...

  3. 微信小程序采坑

    wx.request() complete回调函数执行时机问题 代码执行顺序有时候会严重影响用户体验:比如项目中请求数据时显示loading的图标,请求完成后不管失败还是成功都要把loading图标隐 ...

  4. C# Collection 排序

    Collection<int> aa = new Collection<int>(); aa.Add(1); aa.Add(2); aa.Add(3); aa.Add(1); ...

  5. Linux 磁盘介绍（磁盘、分区、MBR、GPT）

    原文:https://www.linuxidc.com/Linux/2013-06/85717.htm 1. CHS(Cylinder-Head-Sector): was an early metho ...

  6. vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题

    <el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...

  7. 前端 CSS 注释

    /*开头 */ 结尾 /*这是注释*/ <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. Spark SQL历险记

    现在的spark sql编程通常使用scala api 以及 java api的方式,相比于直接使用 spark sql语句,spark api灵活很多,毕竟可以基于dataset以及rdd两种方式进 ...

  9. 使用TCP通信文件上传

    客服端读取本地文件,吧文件上传到服务器,服务器在吧上传的文件保存到服务器硬盘上方法分析1:客户端使用本地字节输入流读取要上传的文件 2:客户端使用网络字节输出流,吧读取到的文件上传到服务器 3:服务器 ...

  10. 牛客随笔（c++）

    1.关于指针的字节大小: 当为32位系统时大小为4字节,64位系统时大小为8字节: #include<iostream> using namespace std; int main() { ...