备案控制台
开发者社区 飞天洛神云网络 全球加速 正文

自己动手丰衣足食之下拉列表

2016-02-21 1259
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

这里写图片描述

源代码：

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
        <title>Document</title>
        <style>
            .box {
                font-size: 14px;
                list-style: none;
                margin: 15px auto;
                padding: 0px;
                width: 1000px;
                color: white;
            }
            .box li {
                font-size: 14px;
                float: left;
                width: 200px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                cursor: pointer;
                background: #333;
            }
            .box li .pox {
                list-style: none;
                margin: 0px;
                padding: 0px;
                display: none;
                color: red;
            }
            .box li .pox li{
                background: blueviolet;
            }
        </style>
        <script>
            $(function(){
                $('.box li').hover(function(){
                    $(this).find('.pox').slideDown('normal');
                },function(){
                    $(this).find('.pox').stop().slideUp('normal');
                });
            })
        </script>
    </head>

    <body>
        <ul class="box">
            <li>导航列表1
                <ul class="pox">
                    <li> 导航列表11</li>
                    <li>导航列表11</li>
                    <li>导航列表11</li>
                    <li>导航列表11</li>
                    <li>导航列表11</li>
                </ul>
            </li>
            <li>导航列表2
                <ul class="pox">
                    <li>导航列表22</li>
                    <li>导航列表22</li>
                    <li>导航列表22</li>
                    <li>导航列表22</li>
                    <li>导航列表22</li>
                </ul>
            </li>
            <li>导航列表3
                <ul class="pox">
                    <li>导航列表33</li>
                    <li>导航列表33</li>
                    <li>导航列表33</li>
                    <li>导航列表33</li>
                    <li>导航列表33</li>
                </ul>
            </li>
            <li>导航列表4
                <ul class="pox">
                    <li>导航列表44</li>
                    <li>导航列表44</li>
                    <li>导航列表44</li>
                    <li>导航列表44</li>
                    <li>导航列表44</li>
                </ul>
            </li>
            <li>导航列表5
                <ul class="pox">
                    <li>导航列表55</li>
                    <li>导航列表55</li>
                    <li>导航列表55</li>
                    <li>导航列表55</li>
                    <li>导航列表55</li>
                </ul>
            </li>
        </ul>

    </body>

</html>

三级下拉菜单

这里写图片描述


<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>CSS样式三级下拉菜单</title>
<style>
@charset "utf-8";
body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif;background: wheat;font-size:12px; color:#FFF;}
body a{color:red;}
.box{margin:13px auto; padding:0px; width:1000px;}
.box ul{margin:0px; padding:0px; list-style:none;}
.box ul li{margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left;; border-radius:4px; box-shadow:#000 0px 0px 1px;}
.box ul li:hover ul{display:block;}
.box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none;}
.box ul li ul{display:none;}
.box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:blue;}
.box ul li ul li:hover{background:green;}
.box ul li ul li:hover ul{visibility:visible;}
.box ul li ul li ul{visibility:hidden; position:relative; top:-37px; left:121px;}
.box ul li ul li ul li{background:white;}
.box ul li ul li ul li:hover{background:yellow;}
</style>
</head>
<body>
<div class="box">
    <ul>
        <li><a href="#">源码爱好者</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">技术文章</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">源码下载</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">广告联系</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">最新更新</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">源代码下载</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">编程技巧</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/dll">编程控件</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">电子书籍</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">网页特效</a>
            <ul>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
                <li><a href="#">Two-level menu</a>
                    <ul>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                        <li><a href="#">Three-level menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
文章标签：
全球加速
JavaScript
前端开发
cometwo123
目录
相关文章
不坑老师
|
9月前
六、如何优雅地在PPT中使用课本插图？（附源文件） | 微课系列教程
上图，相信大家都不陌生吧！没错，《少年闰土》中的经典插图——看瓜刺猹。但这个图，不但没有高清版，就算有高清版，它的复古画风，不管如何都不好在PPT中排版啊。
不坑老师
364 0
瑞崽崽崽
|
5月前
|
前端开发
前端知识笔记（二十）———简易弹窗制作
前端知识笔记（二十）———简易弹窗制作
瑞崽崽崽
28 0
是谢添啊
|
10月前
|
前端开发
软件协会第01次活动第01次任务布置：typora文档编写&markdown语法
软件协会第01次活动第01次任务布置：typora文档编写&markdown语法
是谢添啊
78 0
_江南一点雨
|
12月前
|
XML 前端开发 JavaScript
没有一个顺手的流程绘制工具？好吧，自己动手，丰衣足食
没有一个顺手的流程绘制工具？好吧，自己动手，丰衣足食
_江南一点雨
113 0
ftw2fzqaoykua
|
JSON 前端开发 BI
氚云丨开发课— 04 各种提示框的常见操作| 学习笔记
快速学习氚云丨开发课— 04 各种提示框的常见操作。
ftw2fzqaoykua
316 0
氚云丨开发课— 04 各种提示框的常见操作| 学习笔记
三掌柜666
|
iOS开发 Windows
iOS开发：平时做项目经常用到的快捷键归纳
从事了这么久编程工作，总结了好多知识，但是本人之前从来没有写博客的习惯，通过去年的一次面试，明白了，不写技术博客会被面试官鄙视，所以本人痛下决心，要改变这个不爱写博客的现状，只要有时间，我就把我从开始iOS编程到现在，总结的所有内容都贴出来，之前是直接截图或者word文档，存在自己电脑里面，现在是时候把它们贴出来了。
三掌柜666
121 0
iOS开发：平时做项目经常用到的快捷键归纳
聪小陈
|
小程序 API Android开发
小程序开发-第三章第四节点击查看大图，保存壁纸-全栈工程师之路-中级篇
小程序开发-第三章第四节点击查看大图，保存壁纸-全栈工程师之路-中级篇
聪小陈
131 0
小程序开发-第三章第四节点击查看大图，保存壁纸-全栈工程师之路-中级篇
写代码的海怪
|
前端开发
抄了个在线吉他谱编辑器
这个项目其实是去年期末考复习的时候写的，因为实在不想复习所以无聊参照 有谱么 用 React 写的一个在线吉他谱编辑器。我还将项目里的和弦组件和歌词组件提取出来放在 npm 上。当时就觉得这个网站很不错，玩过吉他的人都知道每次搜吉他谱的时候总会出现谱子要么是 JPG，要么是 PNG，字体大小不样的问题。虽然问题不是很大，但是就是很难看，而这个网站完美解决了这个问题。
写代码的海怪
342 0
抄了个在线吉他谱编辑器
thinkyoung
|
Web App开发 算法
软件破解初级实例教程(附工具附图)
最近在群里总是看到很多新朋友在问： 1、“新手怎么学破解啊？”（这是标准的伸手党，baidu google其实很好用） 2、“哎呀XX大牛，我什么基础都没有啊我不会汇编，不会C更不会C++还不会…………总之高手会的我都不会，我能学么？”（明确的告诉你，你能！你不和唐僧一样罗嗦的话你一定能。
thinkyoung
6943 0
优惠码优惠
WordPress 5文章编辑真难用 换回老版经典编辑器教程
WordPress 5文章编辑真难用 换回老版经典编辑器教程 WordPress 5 正式采用了全新的“Block Editor”编辑器，从而替换了原有“Classic Editor”编辑器，相信有很多人和子凡一样会不习惯或者不喜欢新编辑器，那么新版 WordPress 该如何换回原来的 WordPress 编辑器呢？ 不可否认 WordPress 还是非常人性化的，至少会考虑和兼顾更多的用户，不然子凡也不可能青睐 WordPress，所以及时 WordPress 5更换了全新的编辑器，但是也依旧给大家提供了快速便捷切换到原编辑器的插件：“Classic Editor”。
优惠码优惠
4649 0
飞天洛神云网络

全球加速

热门文章

最新文章

  • 1
    如何应用DataGram进行用户-服务器编程
  • 2
    使用py-mysql2pgsql 简单实现mysql数据库迁移到pgsql
  • 3
    top
  • 4
    利用PhotoShop自定义艺术字体
  • 5
    (NO.00001)iOS游戏SpeedBoy Lite成形记(二十四)
  • 6
    用Ruby实现一个最简的区块链
  • 7
    MySQL高可用集群MHA配置
  • 8
    《阿里云产品手册2022-2023 版》——全球加速
  • 9
    Linq专题之提高编码效率—— 第一篇 Aggregate方法
  • 10
    [20150401]关于sequence问题.txt
  • 1
    《阿里云产品手册2022-2023 版》——全球加速
    127
  • 2
    Hugo 网站优化(3)： 我用 DNS线路解析功能 给网站实现了全球加速
    187
  • 3
    冬奥有洛神，互动0距离 | 阿里云网络全球加速，让观众身临其境，让运动员不再孤
    259
  • 4
    全球加速GA加速IPv6普及
    941
  • 5
    用Ruby实现一个最简的区块链
    6766
  • 6
    图解：vmware workstation 8.0.3 安装vmware tools及文件共享
    1084
  • 7
    文件夹命令
    891
  • 8
    创建删除文件（夹）
    960
  • 9
    top
    1346
  • 10
    如何应用DataGram进行用户-服务器编程
    847

    • 相关课程

    更多
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 物联网开发 - Linux驱动开发实操演练
  • 高级应用技能进阶
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • Lua完全自学手册图文教程

    • 相关电子书

    更多
  • 小程序云应用入门实操系列课程 - 第四讲
  • 小程序云应用入门实操系列课程 - 第一讲
  • 大模型时代的搜推广应用和实践

    • 相关实验场景

    更多
  • 实验手册指导文档
  • Linux指令入门-文件管理
  • 1分钟部署经典小游戏
  • 搭建超级小班课网课系统
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）