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

本文涉及的产品
全球加速 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>
AI 代码解读

三级下拉菜单

这里写图片描述


<!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>
AI 代码解读
目录
打赏
0
0
0
0
33
分享
相关文章
|
9月前
【2023Unity游戏开发教程】零基础带你从小白到超神02——新建第一个项目
【2023Unity游戏开发教程】零基础带你从小白到超神02——新建第一个项目
46 0
|
9月前
|
C++练级之路——模板初阶
C++练级之路——模板初阶
24 0
|
10月前
奇淫技巧系列第三篇:阅读源码时基于一组快捷键让我们知道身在何方!
奇淫技巧系列第三篇:阅读源码时基于一组快捷键让我们知道身在何方!
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
349 0
工具人:推荐 10 款炫酷的 IDEA 主题,百看不腻,个个经典!下
工具人:推荐 10 款炫酷的 IDEA 主题,百看不腻,个个经典!下
工具人:推荐 10 款炫酷的 IDEA 主题,百看不腻,个个经典!下
没有一个顺手的流程绘制工具?好吧,自己动手,丰衣足食
没有一个顺手的流程绘制工具?好吧,自己动手,丰衣足食
《微信小游戏开发》自学讲义整体目录
主要给购买《微信小游戏开发》套装实体书的读者,提供一套自学讲义。依靠这套讲义,读者可以自行安排训练,每天完成一个或多个学习步骤,最快不到三月即可完成所有学习。
234 0
iOS开发:平时做项目经常用到的快捷键归纳
从事了这么久编程工作,总结了好多知识,但是本人之前从来没有写博客的习惯,通过去年的一次面试,明白了,不写技术博客会被面试官鄙视,所以本人痛下决心,要改变这个不爱写博客的现状,只要有时间,我就把我从开始iOS编程到现在,总结的所有内容都贴出来,之前是直接截图或者word文档,存在自己电脑里面,现在是时候把它们贴出来了。
160 0
iOS开发:平时做项目经常用到的快捷键归纳