6级菜单

最新推荐文章于 2023-08-13 09:28:11 发布
最新推荐文章于 2023-08-13 09:28:11 发布
阅读量398 收藏
点赞数
分类专栏： java 文章标签： ie class float menu table div
本文介绍了一种复杂的六级下拉菜单结构实现方案，详细展示了如何通过HTML和CSS搭建多级联动菜单，并针对不同浏览器版本提供了兼容性解决方案。

<div class="menu">

    <ul>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a>

        <ul class="second">

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a>

            <ul class="third">

              <li>

                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a>

                <ul class="fourth">

                  <li>

                    <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                    <a href="http://www.cnblogs.com/rubylouvre/">四级菜单_11</a>

                    <ul class="fifth">

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_11</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                    </ul>

                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                  </li>

                  <li><!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                    <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_12</a>

                    <ul class="sixth">

                      <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_11</a></li>

                      <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_12</a></li>

                      <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_13</a></li>

                    </ul>

                  <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

                </ul>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->

              </li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a>

            <ul class="third">

              <li>

                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a>

                <ul class="fourth">

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_21</a></li>

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_22</a></li>

                </ul>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->

              </li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a>

        <ul class="second">

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li>

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a>

            <ul class="third">

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li>

              <li>

                <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a>

                <ul class="fourth">

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_21</a></li>

                  <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_22</a></li>

                  <li>

                    <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                    <a href="http://www.cnblogs.com/rubylouvre/">四级菜单_23</a>

                    <ul class="fifth">

                      <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_21</a></li>

                      <li><a href="http://www.cnblogs.com/rubylouvre/">五级菜单_22</a></li>

                      <li>

                        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

                        <a href="http://www.cnblogs.com/rubylouvre/">五级菜单_23</a>

                        <ul class="sixth">

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_21</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_22</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_23</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_24</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_25</a></li>

                          <li><a href="http://www.cnblogs.com/rubylouvre/">六级菜单_26</a></li>

                        </ul>

                        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                      </li>

                    </ul>

                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->

                  </li>

                </ul>

                <!--[if lte IE 6]></td></tr></table></a><![endif]-->

              </li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a>

        <ul class="second">

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li>

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

      <li>

        <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

        <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a>

        <ul class="second">

          <li>

            <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->

            <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a>

            <ul class="third">

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_41</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_42</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_43</a></li>

              <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_44</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->

          </li>

          <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li>

        </ul>

        <!--[if lte IE 6]></td></tr></table></a><![endif]-->

      </li>

    </ul>

  </div>

//********************表现层部分*****************

 

 

  <style type="text/css">

    * {

      margin:0;

      padding:0;

    }

    .menu {

      font-size:12px;

    }

    .menu li {/*水平菜单*/

      float:left;

      list-style:none;

      position:relative;/*把包含块移动li元素*/

    }

    .menu a {

      display:block;

      height:32px;

      width:100px;

      line-height:32px;

      background:#a9ea00;

      color:#ff8040;

      text-decoration:none;

      text-align:center;

      overflow:hidden;/*★★★★*/

    }

    .menu a:hover {

      background:#369;

      color:#fff;

    }

    /*新增的二级菜单部分*/

    .menu ul ul {

      visibility:hidden;/*隐藏所有子菜单（二级的,三级的）*/

      position:absolute;

      left:0px;

      top:32px;

    }

    /*指定是显示二级子菜单*/

    .menu ul li:hover ul.second,/*非IE6*/

    .menu ul a:hover ul.second{/*IE6*/

      visibility:visible;

    }

 

    .menu ul ul li {

      clear:both;/*垂直显示*/

      text-align:left;

    }

    .menu .third,.menu .fourth,.menu .fifth,.menu .sixth{

      top:0px;/*重设子菜单相对于包含块哪个位置出现*/

      left:100px;

    }

    /*指定是显示三级子菜单*/

    .menu ul ul li:hover ul.third,

    .menu ul ul a:hover ul.third{

      visibility:visible;

    }

    /*指定是显示四级子菜单*/

    .menu ul ul ul li:hover ul.fourth,

    .menu ul ul ul a:hover ul.fourth{

      visibility:visible;

    }

    /*指定是显示五级子菜单*/

    .menu ul ul ul ul li:hover ul.fifth,

    .menu ul ul ul ul a:hover ul.fifth{

      visibility:visible;

    }

    /*指定是显示六级子菜单*/

    .menu ul ul ul ul ul li:hover ul.sixth,

    .menu ul ul ul ul ul a:hover ul.sixth{

      visibility:visible;

    }

    /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/

    /*二级子菜单*/

    .menu ul ul a:hover{

      background:black;

      color:white;

    }

    /*三级子菜单*/

    .menu ul ul ul a:hover{

      background:#B45B3E;

      color:#369;

    }

    .menu ul ul ul ul a:hover{

      background:#FFE8AA;

      color:#68DFFB;

    }

    .menu ul ul ul ul ul a:hover{

      background:#8080C0;

      color:#F8F8F8;

    }

    .menu ul ul ul ul ul ul a:hover{

      background:#f00;

      color:#000;

    }

    .menu table{

      border-collapse:collapse;

    }

  

自定义分级菜单(可无限分级[推荐三级])
小李同志的博客
07-11 3702
//添加页面 代码 结构图(0是一级分类,) 电脑配件的父类时[电脑],电脑的id是1 id主键 cname分类名称 pid父级分类id path分类路径 status状态 1 电脑 0 0 1 2 电脑配件 1 0，1 1 3 主板 2 0，1，2 1 4 ...
python制作二级菜单_python之tkinter使用-二级菜单
weixin_39875805的博客
11-26 1985
# 菜单功能说明：二级菜单import tkinter as tkfrom tkinter import messageboxroot = tk.Tk()root.title('菜单选择')root.geometry('200x160') # 设置窗口大小def file_fn():label['text'] = '选择了文件的二级菜单！'label.config(fg='red')def se...
layui 无限级别菜单
浅笑微凉的博客
09-29 2361
layui 左侧菜单 无限级别
vue+elementUI实现多级菜单(五级菜单，六级菜单等等)
qq_32154641的博客
01-11 3878
本文只是写了四级菜单，如果你想要更多的菜单，你可以仿造我那样继续写下去，我都有写备注。 源代码如下： <template> <div class="sidebar"> <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20
二级菜单
小白小白从不日别的博客
04-21 7497
原理： 其核心就是两层ul进行嵌套 当鼠标移动到一级菜单时，其对应的二级菜单自动展开 下面我们来看具体的代码： <div class="menu-box"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">课程大纲</a> <ul> <li> <a href="#
自定义bootstrap三级菜单
清叶 的专栏
04-26 2159
效果图&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
QT之二级菜单
雨田哥的博客
12-20 7965
QT之二级菜单QT之二级菜单 开场白 效果图 上代码 可参考文章 下代码 结尾开场白 今天我们一起来了解下，在我们QT中，二级菜单是如何实现的，在上篇我们学习了QT之系统托盘，QT之自定义菜单, QT之样式styleSheet。今天我们在这基础上，增加二级菜单的功能。 效果图 大家注意下这里箭头，不是用的默认效果哦，还是自定义的好看哈！O(∩_∩)下面这张图示是默认的。 上代码voi
LAYUI三级菜单展示
m0_55546349的博客
04-15 1747
<div class="menuFirst layui-tab"> <!-- tab --> <ul class="layui-tab-title" id="menuFirstList"> <!--一级菜单 <li class="layui-this"> <div><img src="../img/icon1.png" alt=""></div>
jQuery一级菜单和二级菜单
wen0627的博客
05-07 3557
1、先做一级菜单，第一步设置body，把大概样子写出来。 2、第二步-1、用css设置通配符。 3、第二步-2、设置ul标签基础样式 。 4、第二步-3、设置类样式。 5、设置jquery内容的第一步先引入jQuery文件。 6、第二步设置一个函数在里面放入我们要设置成的效果，获取文档在在载入页面是的效果，绑定类设置鼠标移入展示一级菜单内容，鼠标移出隐藏内容。 7、一级菜单的说完了，现在来说二级菜单的内容怎么设置移入显示然后在移入下一个就显示下一个隐藏上一个...
如何实现Vue路由的二级菜单
青春木鱼的博客
08-13 5007
当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。
STM32_OLED_三级菜单框架.zip_OLED三级菜单_STM32 菜单_clayp4v_stm32菜单_三级 菜单
07-13
STM32_OLED_三级菜单框架是一个针对STM32微控制器平台，利用SPI接口与OLED显示屏进行交互的项目。这个框架旨在实现一个用户界面友好的三级菜单系统，为嵌入式设备提供更加直观的操作体验。以下是这个项目涉及的关键...
Vue iview-admin框架二级菜单改为三级菜单的方法
12-11
在Vue和iview-admin框架中，构建一个支持三级菜单的后台管理系统是常见的需求。iview-admin默认只提供二级菜单的支持，但通过自定义代码可以轻松地扩展到三级菜单。以下是实现这一目标的具体步骤和相关知识点。 1. ...
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
09-24
在Web开发中，使用纯CSS技术实现具有交互性的二级菜单是一个非常实用的技能。通过CSS的伪类:hover，开发者可以创建一个鼠标悬停时显示子菜单的效果，这个效果在用户体验设计中非常常见。现在我们来详细解析这个知识...
vue.js实现二级菜单效果
10-16
Vue.js实现二级菜单效果涉及的关键知识点主要包括Vue.js基础、组件化开发、动态类绑定、事件处理、条件渲染等。以下是基于给定文件信息的详细知识点介绍： 1. Vue.js基础 Vue.js是一个构建用户界面的渐进式...
原生js实现二级联动菜单
10-15
在网页开发中，二级联动菜单是一种常见的交互设计...6. 函数逻辑：`init`函数用于初始化菜单，`change`函数用于动态更新二级菜单。 理解这些知识点，你可以根据实际需求创建出各种复杂程度的联动菜单，提高用户体验。
springboot智能在线预约挂号系统【附万字论文+PPT+包部署+录制讲解视频】.zip
09-05
标题SpringBoot智能在线预约挂号系统研究AI更换标题第1章引言介绍智能在线预约挂号系统的研究背景、意义、国内外研究现状及论文创新点。1.1研究背景与意义阐述智能在线预约挂号系统对提升医疗服务效率的重要性。1.2国内外研究现状分析国内外智能在线预约挂号系统的研究与应用情况。1.3研究方法及创新点概述本文采用的技术路线、研究方法及主要创新点。第2章相关理论总结智能在线预约挂号系统相关理论，包括系统架构、开发技术等。2.1系统架构设计理论介绍系统架构设计的基本原则和常用方法。2.2SpringBoot开发框架理论阐述SpringBoot框架的特点、优势及其在系统开发中的应用。2.3数据库设计与管理理论介绍数据库设计原则、数据模型及数据库管理系统。2.4网络安全与数据保护理论讨论网络安全威胁、数据保护技术及其在系统中的应用。第3章SpringBoot智能在线预约挂号系统设计详细介绍系统的设计方案，包括功能模块划分、数据库设计等。3.1系统功能模块设计划分系统功能模块，如用户管理、挂号管理、医生排班等。3.2数据库设计与实现设计数据库表结构，确定字段类型、主键及外键关系。3.3用户界面设计设计用户友好的界面，提升用户体验。3.4系统安全设计阐述系统安全策略，包括用户认证、数据加密等。第4章系统实现与测试介绍系统的实现过程，包括编码、测试及优化等。4.1系统编码实现采用SpringBoot框架进行系统编码实现。4.2系统测试方法介绍系统测试的方法、步骤及测试用例设计。4.3系统性能测试与分析对系统进行性能测试，分析测试结果并提出优化建议。4.4系统优化与改进根据测试结果对系统进行优化和改进，提升系统性能。第5章研究结果呈现系统实现后的效果，包括功能实现、性能提升等。5.1系统功能实现效果展示系统各功能模块的实现效果，如挂号成功界面等。5.2系统性能提升效果对比优化前后的系统性能
基于机器学习方法的信用风险评估体系构建与实现
09-05
在金融行业中，对信用风险的判断是核心环节之一，其结果对机构的信贷政策和风险控制策略有直接影响。本文将围绕如何借助机器学习方法，尤其是Sklearn工具包，建立用于判断信用状况的预测系统。文中将涵盖逻辑回归、支持向量机等常见方法，并通过实际操作流程进行说明。 一、机器学习基本概念 机器学习属于人工智能的子领域，其基本理念是通过数据自动学习规律，而非依赖人工设定规则。在信贷分析中，该技术可用于挖掘历史数据中的潜在规律，进而对未来的信用表现进行预测。 二、Sklearn工具包概述 Sklearn（Scikit-learn）是Python语言中广泛使用的机器学习模块，提供多种数据处理和建模功能。它简化了数据清洗、特征提取、模型构建、验证与优化等流程，是数据科学项目中的常用工具。 三、逻辑回归模型 逻辑回归是一种常用于分类任务的线性模型，特别适用于二类问题。在信用评估中，该模型可用于判断借款人是否可能违约。其通过逻辑函数将输出映射为0到1之间的概率值，从而表示违约的可能性。 四、支持向量机模型 支持向量机是一种用于监督学习的算法，适用于数据维度高、样本量小的情况。在信用分析中，该方法能够通过寻找最佳分割面，区分违约与非违约客户。通过选用不同核函数，可应对复杂的非线性关系，提升预测精度。 五、数据预处理步骤 在建模前，需对原始数据进行清理与转换，包括处理缺失值、识别异常点、标准化数值、筛选有效特征等。对于信用评分，常见的输入变量包括收入水平、负债比例、信用历史记录、职业稳定性等。预处理有助于减少噪声干扰，增强模型的适应性。 六、模型构建与验证 借助Sklearn，可以将数据集划分为训练集和测试集，并通过交叉验证调整参数以提升模型性能。常用评估指标包括准确率、召回率、F1值以及AUC-ROC曲线。在处理不平衡数据时，更应关注模型的召回率与特异性。 七、集成学习方法 为提升模型预测能力，可采用集成策略，如结合多个模型的预测结果。这有助于降低单一模型的偏差与方差，增强整体预测的稳定性与准确性。 综上，基于机器学习的信用评估系统可通过Sklearn中的多种算法，结合合理的数据处理与模型优化，实现对借款人信用状况的精准判断。在实际应用中，需持续调整模型以适应市场变化，保障预测结果的长期有效性。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
橙色s（）_Orange's一个操作系统的实现(随书光盘).zip
09-05
橙色s（）_Orange's一个操作系统的实现(随书光盘).zip
perl-Hash-Flatten-1.19-26.el8.tar.gz
最新发布
09-05
# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
兼容IE6的二级下拉菜单实现教程
2. **绝对定位和双层布局**：为了实现二级菜单的显示，通常使用CSS的绝对定位。在IE6中可能需要创建双层容器的布局，使用绝对定位来确保下拉菜单正确显示，同时对外层容器使用相对定位作为参照。 3. **显示和隐藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值