多层菜单

最新推荐文章于 2024-03-27 16:53:50 发布
最新推荐文章于 2024-03-27 16:53:50 发布
阅读量95 收藏
点赞数
原文链接：http://www.cnblogs.com/5201314m/p/9718968.html
版权

实现水平导航栏，多层菜单：

html:

<body>
    <div id="nav">
        <div class="title">
            <a class="title1" href="#">liyibo</a>
            <div class="first">
                <ul>
                    <li><a href="#">liyibo1</a>
                        <div class="second">
                        <ul>
                            <li><a href="#">csq1</a>
                                <div class="third">
                                <ul>
                                    <li><a href="#">zs1</a></li>
                                    <li><a href="#">zs1</a></li>
                                    <li><a href="#">zs1</a></li>
                                </ul>
                                </div>
                            </li>
                            <li><a href="#">csq1</a></li>
                            <li><a href="#">csq1</a></li>
                        </ul>
                        </div>
                    </li>
                    <li><a href="#">liyibo2</a>
                        <div class="second">
                            <ul>
                                <li><a href="#">csq2</a></li>
                                <li><a href="#">csq2</a></li>
                                <li><a href="#">csq2</a></li>
                            </ul>
                        </div>                    
                    </li>
                    <li><a href="#">liyibo3</a>
                        <div class="second">
                            <ul>
                                <li><a href="#">csq3</a></li>
                                <li><a href="#">csq3</a></li>
                                <li><a href="#">csq3</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="title">
            <a class="title1" href="#">liyibo</a>
            <div class="first">
                <ul>
                    <li><a href="#">liyibo4</a>
                    <div class="second">
                        <ul>
                            <li><a href="#">csq4</a></li>
                            <li><a href="#">csq4</a></li>
                            <li><a href="#">csq4</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">liyibo5</a></li>
                    <li><a href="#">liyibo6</a></li>
                </ul>
            </div>
        </div>
        
        <div class="title">
            <a class="title1" href="#">liyibo</a>
            <div class="first">
                <ul>
                    <li><a href="#">liyibo7</a></li>
                    <li><a href="#">liyibo8</a>
                    <div class="second">
                        <ul>
                            <li><a href="#">csq8</a></li>
                            <li><a href="#">csq8</a></li>
                            <li><a href="#">csq8</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">liyibo9</a></li>
                </ul>
            </div>
        </div>
        
        
    </div>





</body>

 

css:

    <style>
        *{
            padding:0;
            margin:0;
            text-decoration:none;
            list-style-type:none;
        }
        
        .title{
            float:left;
        }
        
        .title1{
            width:200px;
            height:40px;
            background-color:#B0B0B0;
            color:white;
            display:block;
            text-align:center;
            clear:both;
            
        }
        
        .first  {
            width:250px;        
            background-color:FFFF99;
            display:none;
            position:absolute;    
        }
        .second{
            width:270px;    
            background-color:FFCCCC;
            position:absolute;
            display:none;
            position:absolute;
            left:100%;
            top:0;
        }
        .third{
            width:270px;
            background-color:FFCCCC;
            position:absolute;
            display:none;
            position:absolute;
            left:100%;
            top:0;
        }
        .first li {
            color:black;
            display:block;
            padding:10px 10px 10px 10px;
        }
        
        .second li{
            color:black;
            display:block;
            padding:8px 8px 10px 10px;
        }
        .third li{
            color:black;
            display:block;
            padding:8px 8px 10px 10px;
        }
        .title:hover .first {
            display:block;
        }
        
        .first li:hover .second{
            display:block;
        }
        .second li:hover .third{
            display:block;
        }
        .title:hover .title1{
            background-color:#989898;
        }
        
        li:hover{
            background-color:FFFF66;
        }
        
        
        
        
    </style>

 

完整代码如下：

<html>
<head>
    <meta charset="utf-8" />
    <title>测试</title>
    <style>
        *{
            padding:0;
            margin:0;
            text-decoration:none;
            list-style-type:none;
        }
        
        .title{
            float:left;
        }
        
        .title1{
            width:200px;
            height:40px;
            background-color:#B0B0B0;
            color:white;
            display:block;
            text-align:center;
            clear:both;
            
        }
        
        .first  {
            width:250px;        
            background-color:FFFF99;
            display:none;
            position:absolute;    
        }
        .second{
            width:270px;    
            background-color:FFCCCC;
            position:absolute;
            display:none;
            position:absolute;
            left:100%;
            top:0;
        }
        .third{
            width:270px;
            background-color:FFCCCC;
            position:absolute;
            display:none;
            position:absolute;
            left:100%;
            top:0;
        }
        .first li {
            color:black;
            display:block;
            padding:10px 10px 10px 10px;
        }
        
        .second li{
            color:black;
            display:block;
            padding:8px 8px 10px 10px;
        }
        .third li{
            color:black;
            display:block;
            padding:8px 8px 10px 10px;
        }
        .title:hover .first {
            display:block;
        }
        
        .first li:hover .second{
            display:block;
        }
        .second li:hover .third{
            display:block;
        }
        .title:hover .title1{
            background-color:#989898;
        }
        
        li:hover{
            background-color:FFFF66;
        }
        
        
        
        
    </style>
</head>

<body>
    <div id="nav">
        <div class="title">
            <a class="title1" href="#">liyibo</a>
            <div class="first">
                <ul>
                    <li><a href="#">liyibo1</a>
                        <div class="second">
                        <ul>
                            <li><a href="#">csq1</a>
                                <div class="third">
                                <ul>
                                    <li><a href="#">zs1</a></li>
                                    <li><a href="#">zs1</a></li>
                                    <li><a href="#">zs1</a></li>
                                </ul>
                                </div>
                            </li>
                            <li><a href="#">csq1</a></li>
                            <li><a href="#">csq1</a></li>
                        </ul>
                        </div>
                    </li>
                    <li><a href="#">liyibo2</a>
                        <div class="second">
                            <ul>
                                <li><a href="#">csq2</a></li>
                                <li><a href="#">csq2</a></li>
                                <li><a href="#">csq2</a></li>
                            </ul>
                        </div>                    
                    </li>
                    <li><a href="#">liyibo3</a>
                        <div class="second">
                            <ul>
                                <li><a href="#">csq3</a></li>
                                <li><a href="#">csq3</a></li>
                                <li><a href="#">csq3</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="title">
            <a class="title1" href="#">liyibo</a>
            <div class="first">
                <ul>
                    <li><a href="#">liyibo4</a>
                    <div class="second">
                        <ul>
                            <li><a href="#">csq4</a></li>
                            <li><a href="#">csq4</a></li>
                            <li><a href="#">csq4</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">liyibo5</a></li>
                    <li><a href="#">liyibo6</a></li>
                </ul>
            </div>
        </div>
        
        <div class="title">
            <a class="title1" href="#">liyibo</a>
            <div class="first">
                <ul>
                    <li><a href="#">liyibo7</a></li>
                    <li><a href="#">liyibo8</a>
                    <div class="second">
                        <ul>
                            <li><a href="#">csq8</a></li>
                            <li><a href="#">csq8</a></li>
                            <li><a href="#">csq8</a></li>
                        </ul>
                    </div>
                    </li>
                    <li><a href="#">liyibo9</a></li>
                </ul>
            </div>
        </div>
        
        
    </div>





</body>
</html>

 

需要注意的是，设置浮动的时候需要给“整体”设置，给ul添加absolute定位，设置left及top，

 

转载于:https://www.cnblogs.com/5201314m/p/9718968.html

weixin_30340617
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Python读取yaml文件多层菜单
09-19
在本篇文章中，我们将探讨如何使用Python读取yaml文件中的多层菜单数据。为了实现这个功能，我们需要掌握以下几个关键的Python知识点： 1. **Python的对象属性方法**：Python中的对象可以拥有属性和方法，这些属性...
element-UI配置多层级菜单
CodingNoob
11-02 2262
入口文件： <template> <div class="menu" id="menu"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <menuItem v-for="item in menuList" :key="item.id" :data="item" class="hor
多级菜单(树形结构)-查询和删除(递归)
雨声学java
06-02 2778
2、仅有一级菜单和二级菜单（利用嵌套的方法）（代码冗余） 3、多级菜单 3、1（利用嵌套，在2的基础上，多层嵌套） 3、2（利用递归） 4、多级菜单递归删除 多级菜单递归删除
vue手动实现多层级菜单列表
qq_52937529的博客
03-27 425
vue手动实现多级菜单列表，包括菜单的路由跳转
关于项目中出现的多层级菜单的实现方法
zb201666的博客
05-27 2040
关于项目中出现的多层级菜单的实现方法 在项目开发中，经常会有多层级菜单的功能需求需要实现，实现多层级菜单一般都是采取递归的方式进行逐级遍历，但是这种方式存在明显的不足，就是当层级关系比较深时，通过父级去递归对应的子级，子级去递归自己的子级时，如果涉及到数据库的查询，那么就会多次发送SQL查询语句去数据库查询，造成数据库访问剧增，严重影响系统功能的响应速度，造成不好的用户体验。这里，我给大家介绍一种...
element 多层导航菜单，让网页设计更简洁、美观
Shids_的博客
01-15 1万+
element 多层导航菜单，让网页设计更简洁、美观
51黑论坛_液晶多级菜单_多层菜单程序_菜单_
10-02
在嵌入式开发领域，尤其是基于STM32F103微控制器的系统设计中，构建液晶多级菜单是常见的需求...通过学习和理解这些代码，开发者可以掌握如何在STM32F103平台上创建和管理多层菜单，进一步提升其在嵌入式开发中的技能。
jQuery-Easyui 1.2 实现多层菜单效果的代码
10-28
早上打开邮箱，一位朋友问我之前JQuery-Easyui 怎么做可以实现多级菜单
LCD菜单.rar_ LCD_C++ 多层菜单_Menu_lcd 128160_液晶 多级 菜单 实现 方法
07-15
多层菜单显示程序。可以实现日历等的多菜单操作，已验证
LCD多层菜单的实现
07-18
修改或增加菜单项，并不须要更改代码，只须要在对应的地方添加或更改对应函数即可。同样本人还发现，如果要实现多层菜单，只须要适当修改算法即可实现，下面我们将详细介绍多层菜单在单层菜单的基础下实现的方法。
多层顶级菜单
04-13
多层顶级菜单，并用SetMenu在顶级菜单中切换
动态多层菜单
aoding8407的博客
09-26 391
其实这个应该不算.NET方面的东西，只是个asp+js的，而且代码的来源是COOLMENU（http://www.dhtmlcentral.com）只是自己完全研究了一下，并准备在下步的工作中，在asp.net中实现它，可能已经有了这方面好的东西了，如果有，希望大家告诉一下，谢谢先 最终效果： 核心代码1 js包含文件 functionmakePageCoords(win,fr)...
html 多级菜单
热门推荐
魑魅魍魉9527
11-24 1万+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Ty
多级菜单的实现
qq_45870861的博客
06-22 1823
#include <stdio.h> #include <stdlib.h> #include <string.h> #define MAXWORD 25 #define MAXMEAN 50 struct record { //记录结构_读者 char word[MAXWORD+1]; //key char mean[MAXMEAN+1]; }; struct lnode { //链表结点结构 struct record data;/
java 递归实现N级菜单
ahty的专栏
06-20 2884
算法已经改进，请看最新：https://blog.csdn.net/u011060906/article/details/98942421 这个是单一根节点的，如果需要多根节点的参考：https://blog.csdn.net/u011060906/article/details/88549862 最近需要做一个N级菜单的查询，所以想到了递归，这里就简单写一下思路 首先退出条件就...
多级分类菜单的实现
成长的小路
12-15 4630
项目需要在商品分类页面生成多层菜单在网上搜了很多例子然后自己总结了一下写下来备用 项目技术：Gson解析 ListView与gridview相互嵌套 多层解析json Picasso图片加载框架 此项目为三层分类，首先通过Gson解析获得第一层分类数据，接口比较简单Gson解析中使用了泛型，上代
微信小程序设计淘宝客导购小程序 pangolin_tbk 2.0.8安装更新一体包源代码+部署教程完美运行版.7z
最新发布
08-11
经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目！【项目资源】：微信小程序。【项目说明】：聚焦计算机相关专业毕设及实战操练，可作课程设计与期末大作业，含全部源码，能直用于毕设，经严格调试，运行有保障！【项目服务】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。
el-menu动态多层菜单
08-26
el-menu动态多层菜单的实现可以通过使用自定义组件和递归调用来实现。首先，在Vue文件中引入menuTree组件，并在el-menu组件中使用该组件。在menuTree组件中，使用v-for循环遍历传入的菜单数据，判断是否有子菜单。如果有子菜单，则使用el-submenu组件并在其中递归调用menuTree组件。如果没有子菜单，则使用el-menu-item组件显示当前菜单项。通过这样的方式，可以实现多层级的动态菜单显示。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-menu多级动态菜单渲染](https://blog.csdn.net/ZhangXiaoTianZC/article/details/120040041)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-menu实现多级菜单效果](https://blog.csdn.net/yihanzhi/article/details/108218944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值