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

本文涉及的产品
全球加速 GA,每月750个小时 15CU
简介:

这里写图片描述

源代码:

<!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>
目录
相关文章
|
Android开发
获取APP版本号:versionName、versionCode---Android基础篇
获取APP版本号:versionName、versionCode---Android基础篇
2494 0
|
Shell Python
miniconda使用体验
## 简介 miniconda是什么呢? 这里简单用一个公式来说明 miniconda = virtualenv + pyenv + pypi源 通过miniconda可以实现创建隔离的python包环境,下载特定的python包版本,使用conda源上编译好的whl包。可以说一应俱全。 ## 安装 miniconda在Mac可以直接用Brew安装,一行命令 `brew install mini
1137 0
|
IDE Unix Shell
芯驰(E3-gateway)开发板环境搭建以及调试遇到问题的解决
芯驰(E3-gateway)开发板环境搭建以及调试遇到问题的解决
|
运维 安全 NoSQL
如何使用官方最新源代码部署yapi?
我们之前使用的yapi 1.9.2,存在高危漏洞,攻击者可利用该漏洞在目标服务器上执行任意代码,导致服务器被攻击者控制,植入木马或挖矿病毒。通过目前网络上给出的安全解决方案,总感觉解决的不彻底,yapi 官方仓库已经修复了沙箱提权的问题,我尝试使用官方最新源代码部署yapi,遇到好多问题,顺手记录下来,无论部署新环境或者升级新版本,日后方便自己回顾或者他人参考。
1381 0
如何使用官方最新源代码部署yapi?
|
算法
递归算法实例应用(四)
递归算法实例应用(四):(POJ 4017)爬楼梯、(POJ 1664)放苹果
4137 0
|
Java Android开发
Android/Java中解析.crt证书文件的公钥(public key)---Android拓展篇
Android/Java中解析.crt证书文件的公钥(public key)---Android拓展篇
1801 0
|
人工智能 运维 监控
新发布:免费的防疫数据分析与可视化平台---阿里云新冠病毒疫情分析App
免费的防疫数据分析与可视化平台能力---阿里云新冠病毒疫情分析App 新冠病毒疫情分析App是基于阿里云日志服务中台,提供的一站式的数据处理可视化分析系统。借助它,可以在全球范围内了解各省份、市区的全面一手疫情信息和防疫新闻动态。目前该能力全面开放给政府、社区、第三方平台和开放者进行广泛应用。
4787 0
|
存储 关系型数据库 MySQL
utf8改成utf8mb4实战教程
在 MySQL 中,系统支持诸多字符集,不同字符集之间也略有区别。目前最常用的字符集应该是 utf8 和 utf8mb4 了,相比于 utf8 ,utf8mb4 支持存储 emoji 表情,使用范围更广。本篇文章将会介绍 utf8 修改成 utf8mb4 字符集的方法。
860 0
|
索引 Python
NumPy 基本切片和索引(一)
ndarrays可以使用标准Python x[obj]语法对其进行索引 ,其中x是数组,obj是选择方式。有三种可用的索引:字段访问,基本切片,高级索引。究竟是哪一个取决于obj。
214 0
|
JSON 前端开发 搜索推荐
揭秘!闲鱼拉新投放系统如何设计
短!平!快!准!狠!
11507 0