二级菜单

最新推荐文章于 2023-08-13 09:28:11 发布
最新推荐文章于 2023-08-13 09:28:11 发布
阅读量82 收藏
点赞数
分类专栏： 代码 
<html>
<head>
    <title>二级菜单测试</title>
    <meta charset="utf-8">
    <style type="text/css">

    /*为了使菜单居中*/
    body {
        padding-top:100px;
        text-align:center; 
    }
    
    
    /* -------------菜单css代码----------begin---------- */
    .menuDiv { 
        border: 2px solid #aac; 
        overflow: hidden; 
        display:inline-block;
    }
    
    /* 去掉a标签的下划线 */
    .menuDiv a {
        text-decoration: none;
    }
    
    /* 设置ul和li的样式 */
    .menuDiv ul , .menuDiv li {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
    } 
    
    /* 设置二级菜单绝对定位，并隐藏 */
    .menuDiv > ul > li > ul {
        position: absolute;
        display: none;
    }

    /* 设置二级菜单的li的样式 */
    .menuDiv > ul > li > ul > li {
        float: none;
    }
  
    /* 鼠标放在一级菜单上，显示二级菜单 */
    .menuDiv > ul > li:hover ul {
        display: block;
    }

    /* 一级菜单 */
    .menuDiv > ul > li > a {
        width: 120px;
        line-height: 40px;
        color: black;
        background-color: #cfe;
        text-align: center;
        border-left: 1px solid #bbf;
        display: block;
    }
    
    /* 在一级菜单中，第一个不设置左边框 */
    .menuDiv > ul > li:first-child > a {
        border-left: none;
    }

    /* 在一级菜单中，鼠标放上去的样式 */
    .menuDiv > ul > li > a:hover {
        color: #f0f;
        background-color: #bcf;
    }

    /* 二级菜单 */
    .menuDiv > ul > li > ul > li > a {
        width: 120px;
        line-height: 36px;
        color: #456;
        background-color: #eff;
        text-align: center;
        border: 1px solid #ccc;
        border-top: none;
        display: block;
    }
    
    /* 在二级菜单中，第一个设置顶边框 */
    .menuDiv > ul > li > ul > li:first-child > a {
        border-top: 1px solid #ccc;
    }
    
    /* 在二级菜单中，鼠标放上去的样式 */
    .menuDiv > ul > li > ul > li > a:hover {
        color: #a4f;
        background-color: #cdf;
    }
    
    </style>
</head>
<body>

    <!-- -------菜单html代码---------begin------- -->
    <div class="menuDiv">
        <ul>
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">菜单三</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">菜单四</a>
            </li> 
            <li>
                <a href="#">菜单五</a>
                <ul>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                    <li><a href="#">二级菜单</a></li>
                </ul>
            </li> 
        </ul>
    </div>
    <!-- -------菜单html代码---------end------- -->
    
</body>
</html>
lidonghao123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS制作二级菜单栏
孙婷婷的博客
12-24 2万+
今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！ 效果图附上： 首先：我已链接了外部样式重置，所以无需自己亲自写： reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！ 链接：https://pan.baidu.com/s/1doPA17vy--Qt...
python制作二级菜单_python之tkinter使用-二级菜单
weixin_39875805的博客
11-26 1758
# 菜单功能说明：二级菜单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...
html 二级菜单
hzl529的博客
11-12 7568
先放效果图： 首先设置菜单的基本轮廓 <div id="nav"> <ul> <li><a href="#">一级菜单1</a></li> <li><a href="#">一级菜单2</a></li> <li>...
JS二级菜单
xing942012的博客
11-26 2107
我们使用HTML+css+js来写出二级菜单的简易效果 首先来看HTML的代码，这个没什么好说的 <div class="box"> <div class="topbox"> <ul> <li class="bgc">春雨</li> <li>夏风</li> <li>秋雾</li> <li>冬雪</li> &l
html二级菜单的创建
小贱贱的博客
06-02 1万+
二级菜单用的是无序列表嵌套，：hover鼠标悬浮其上方发生的事 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin: 0; ...
css实现二级菜单
热门推荐
lihuihui2016的博客
03-03 1万+
注意事项： 1.二级菜单的hover事件一定要写在父元素才起作用 2.为了防止导航栏下面的banner图或内容盖住二级菜单，需要给导航栏定位， 来提高二级菜单的层级 3.定位之后，二级菜单的宽将不再继承它父元素的宽，需要重新定义，否则它将被内容撑开 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta char...
如何实现Vue路由的二级菜单
青春木鱼的博客
08-13 3391
当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。
elementui二级菜单
aitengteng1的博客
05-10 2257
<el-menurouter:default-active="activeIndex"mode="horizontal"@select="handleSelectMenu"> <!--<el-menu-itemstyle="border:none"v-for="(item,index)inmenuData":index="index+''":key="index":route="{name:item.routername}...
Js实现原生二级菜单
xsgg1234的博客
07-27 7849
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
二级菜单二级菜单二级菜单
12-19
二级菜单
Android实现横向二级菜单
09-02
本教程将详细介绍如何在Android平台上实现一个横向二级菜单，这种菜单通常用于提供更精细的导航选项，提升用户体验。横向二级菜单在许多应用程序中都有应用，其美观的设计能吸引用户的眼球。 实现横向二级菜单主要...
鼠标移至二级菜单时一级菜单仍然保留停留样式.rar
03-16
<TITLE> 二级下拉特效 ; charset=utf-8" http-equiv=Content-Type> <META name=GENERATOR content="MSHTML 8.00.6001.19222"></HEAD> <li><a class="topa" href="http://www. .com">首页</a></li> ...
通用的二级菜单代码(css+javascript)
10-29
在网页设计中，二级菜单是一种常见的交互元素，用于组织和展示网站的多层次结构。在本文中，我们将深入探讨如何利用CSS（层叠样式表）和JavaScript来创建一个通用的二级菜单。首先，我们需要理解二级菜单的基本工作...
ChatGPT原理1-3
06-20
ChatGPT原理1-3
aiohttp-3.4.0b2.tar.gz
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
小程序版通过CNN训练识别印刷体数字和字母-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
AI+智慧校园建设方案PPT(100页).pptx
06-20
智慧校园大数据信息化AIOT平台建设整体解决方案是一个综合性的校园智能化升级计划，旨在通过应用物联网、大数据、人工智能等高新技术，打造一个安全、便捷、绿色的校园环境。该方案遵循国家教育信息化2.0规划和相关标准，强调技术在教育领域的深度应用。 方案的核心内容包括全场景的智能互联、物信融合、AI赋能创新应用，以及校园营运指挥中心的建设。它涵盖了智慧管理、智慧服务、智慧教学等多个方面，通过SAAS、PAAS、DAAS、IAAS等多层次的系统架构，实现从数据存储、管理到智能分析和应用的全面覆盖。 智慧应用聚焦于校园特色场景，如教室、宿舍、图书馆和食堂，通过AI视频智能分析技术，提供便捷服务。方案还包括智能安防、智慧消防、能耗监管等，以实现校园的智能化管理。例如，人脸门禁系统提供无感通行，提高安全性和便捷性；车辆管理系统通过轨迹分析和布控，优化交通秩序。 此外，方案还强调了智能照明、智能水控和电控等节能环保措施，以及通过智能语音分析和录播方案提升教学质量。智慧宿舍通过人脸宿管和智能节电，提高宿舍管理效率。整体上，该方案通过技术集成和创新，推动校园向智能化、信息化转型，为师生创造更安全、便捷、环保的学习和生活环境。
pyzmq-26.0.0b2-cp312-cp312-win_arm64.whl
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
drupal网站二级菜单
06-20
Drupal是一个强大的开源内容管理系统（CMS），它提供了丰富的模块化架构，包括灵活的菜单系统，以支持各种层次的导航，二级菜单就是其中的一部分。在Drupal中，创建和管理二级菜单通常涉及以下几个步骤： 1. **安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值