html 学习二级菜单

最新推荐文章于 2024-05-27 17:40:18 发布
最新推荐文章于 2024-05-27 17:40:18 发布
阅读量1.2k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_yJava/article/details/81545331
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        #body{
        background-image: url("Bg2.jpg");
        width:1350px;
        height:580px;
        margin:auto;
        }
        ul{
            list-style-type: none;
        }
        a{
            text-decoration: none;
            line-height: 30px;
            color: white;
            font-weight: bold;
        }
        
        ul li{
            float: left;
            background-color: blue;
            text-align: center;
            width: 10em;
            height: 30px;
        }

        ul li ul{
            /*float:left;*/
            display:none;
            /*position: absolute;*/
            /*left: -100em;*/
        }

        #level1 li:hover ul{
            /*left:auto;*/
            display:block;
        }

        ul li:hover{
            background-color: red;
        }

    </style>
</head>
<body>
    <div id="body">
    <ul id="level1">
        <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>
                <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>
            </ul>
        </li>
        <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>
                <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>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

520ysl
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML一级菜单和二级菜单区别,一级菜单和二级菜单对不齐
weixin_30888681的博客
06-04 1754
html>二级菜单*{margin:0px;padding:0px;}ul{font-size:18px;color:white;list-style-type:none;text-align:center;width:200px;line-height:40px;background-color:black;position:relative;}a{color:whit...
python制作二级菜单_python之tkinter使用-二级菜单
weixin_39875805的博客
11-26 1791
# 菜单功能说明：二级菜单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二级菜单显示与隐藏,二级菜单显示与隐藏效果
weixin_42300090的博客
06-03 2474
无标题文档*{ margin:0px; padding:0px;}body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}ul{ list-style:none;}ul li{ float:l...
html左侧二级子菜单隐藏,二级菜单显示与隐藏效果
weixin_33308507的博客
06-02 1354
无标题文档*{ margin:0px; padding:0px;}body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}ul{ list-style:none;}ul li{ float:l...
HTML垂直二级菜单的设计与实现
2301_77335001的博客
05-27 311
【代码】HTML垂直二级菜单的设计与实现。
html二级菜单点击淡入淡出,Web前端开发实战1：二级下拉式菜单之CSS实现
weixin_35625324的博客
06-18 1432
二级下拉式菜单在各大学校站点。电商类站点。新闻类站点等大型？站点非经常见，那么它的实现原理是什么呢？学习了Web前端开发的知识后，我们是能够实现这种功能的。复杂的都是从基础效果上加入做出来的。原理和流程还是一样的，今天開始做一些简单的二级下拉式菜单。横向一级菜单我们见到的非常多。例如以下图所看到的是：watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/fon...
html鼠标点击显示二级菜单内容,js实现二级菜单点击显示当前内容效果
weixin_35513122的博客
06-04 1129
最近做了一个二级菜单点击事件的效果，一级菜单有3个，二级菜单是固定的，而且html布局并不是父子级关系，具体请看效果图如下html结构入下您好！日期滚球今日赛事早盘更改密码密码恢复账户历史|交易状况足球|篮球/美式足球|网球|排球|羽毛球|乒乓球|棒球|斯诺克/台球|其他css样式我这里就不一一罗列了，根据你自己页面需求自己设计下面是重要内容jsfunction allGame() {var li...
vue——二级菜单demo
qq_41261490的博客
05-22 3814
学习了vue，最近想着写一写demo练一练，今天写的二级菜单，中间踩过很多坑 1、存数据：最开始想着一级菜单存一个数组，二级菜单存不同的数组。那么问题来了，一级菜单和二级菜单应该是超级相关联的，如果分开存储再去建立关系很麻烦，所以存在一个数组对象中，那么也就是说，不管多少级菜单都可以这样，又方便还不需要我们自己去建立相关关系。 2、‘^’ 的变化，最开始想着不同状态用v-show去操作dom...
html点击展开菜单,简单实现js点击展开二级菜单功能
weixin_39624461的博客
05-30 2330
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这里有...
android二级菜单ui,【咸鱼教程】一个简单的弹出二级菜单UIPopupMenu
weixin_26801149的博客
05-26 1177
一、 实际效果演示地址二、实现原理主要用Button+List组件，和遮罩实现。1. 点击Button时，将List下移展开。2. 再次点击Button，或者选中List中的某一项时，将List上移收缩。三、使用方法1. 拖动UIPopupMenu自定义组件到场景exml上2. 根据需求自定义UIPopupMenuSkin，并为组件UIPopupMenu设置皮肤(自定义皮肤UIPopupMenu...
html和css实现一级菜单和二级菜单学习笔记
热门推荐
wj903829182的专栏
08-21 1万+
实现一级菜单二级菜单：
html二级菜单 的例子.zip
01-13
通过查看和学习这些文件，你可以更好地理解如何创建和定制HTML二级菜单。文件名为1和2，可能是HTML和CSS文件，分别展示了菜单的结构和样式。实际应用中，你可以根据项目需求对这些示例进行调整和扩展。
原生js实现二级联动菜单
10-15
这种菜单的特性是，当用户在第一级菜单中选择一个选项时，第二级菜单会根据所选的选项动态更新其内容。本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先，我们需要了解HTML结构。在示例代码中，有...
仿美团二级菜单
06-15
1. **HTML 结构**：二级菜单的基础是HTML的结构，通常会使用`<ul>`和`<li>`标签构建多级列表。一级菜单项作为顶级`<li>`，二级菜单项作为子`<li>`嵌套在一级菜单项下。 2. **CSS 样式**：为了实现美观的视觉效果，...
仿京东不规则边框二级菜单.zip
12-24
在本项目"仿京东不规则边框二级菜单.zip"中，开发者尝试实现了一个与京东网站类似的具有不规则边框效果的二级菜单。这个菜单不仅在视觉上与京东的风格相似，还添加了广告关闭功能，并处理了盒子在关闭时上移的交互...
JavaScript案例-js伸缩二级菜单
02-16
这个案例中的"02_teleMenu"文件可能包含了实际的HTML、CSS和JavaScript代码，用于展示更复杂或优化的伸缩二级菜单实现。你可以进一步研究这个文件，学习如何调整动画效果、添加过渡效果或者优化性能。 总的来说，...
【SCI顶级】金豺算法GJO-CNN-LSTM-Multihead-Attention温度预测【含源码 5741期】.zip
最新发布
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
2023睿抗机器人开发者大赛.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
【JCR一区级】飞蛾扑火算法MFO-CNN-LSTM-Attention故障诊断分类预测【含源码 5668期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
css导航栏横向二级菜单
11-05
这是一款使用jQuery和CSS实现的红色线条横向二级菜单效果。它带有导航菜单，当前选中的菜单项会以个性化的方式显示出来。当鼠标悬停在菜单上时，会显示菜单缺口。这是一个简单的二级导航栏，但实际上，我们通常看到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值