css 设置鼠标覆盖显示菜单

在这里插入图片描述
鼠标覆盖到“全部分类”效果如下
在这里插入图片描述
鼠标放到“精品推荐”效果如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #main{
            width: 450px;
            height: 500px;
            background-color: antiquewhite;
            margin: 0 auto;
        }
        .nav{
            width: 100px;
            height: 30px;
            position: relative;
            display: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        /* 设置列表 */
        .nav_list{
            width: 180px;
            background-color: rgb(246, 248, 248);
            float: left;
            position: absolute;
            top: 0px;
            margin-left: 90px;
            display: none;

        }
        .nav_list ul li{
            list-style: none;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;

        }
        .nav:hover .nav_list{
            display: block;
        }
        .nav:hover{
            background-color: rgb(246, 248, 248);
        }
        #protect_list{
            width: 1180px;
            height:50px;
            background-color: azure;
        }
       

        #protect_list:hover .nav{
            display: block;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="protect_list">
            <h2>全部分类</h2>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav">
                <h3>精品推荐</h3>
                <div class="nav_list">
                    <ul>
                        <li><a href="#">精品推荐1</a></li>
                        <li><a href="#">精品推荐2</a></li>
                        <li><a href="#">精品推荐3</a></li>
                        <li><a href="#">精品推荐4</a></li>
                        <li><a href="#">精品推荐5</a></li>
                        <li><a href="#">精品推荐6</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/274040.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

猫冻干哪个牌子好又便宜？性价比高的5款主食冻干猫粮推荐

猫冻干哪个牌子好又便宜？性价比高的5款主食冻干猫粮推荐

各位铲屎官都知道猫天性是食肉动物&#xff0c;无肉不欢的。而冻干猫粮对于猫咪来说是最好还原猫咪食肉天性的食物&#xff0c;不仅可以当成猫咪的主食&#xff0c;也可以用来给猫咪当成零食&#xff0c;帮助猫咪补充营养。冻干猫粮是经过真空冷冻干燥处理的鲜肉&#xff0c;能…
阅读更多...
DRF从入门到精通五（路由组件、认证组件、权限组件、频率组件及认证、权限源码分析）

DRF从入门到精通五（路由组件、认证组件、权限组件、频率组件及认证、权限源码分析）

文章目录 一、路由组件REST framework提供了两个routeraction装饰器 二、认证组件(Authentication)三、权限组件(Permissions)内置权限类 四、频率组件(Throttling)五、权限组件源码分析六、认证组件源码分析 一、路由组件 对于视图集ViewSetMixin&#xff0c;我们除了可以自己…
阅读更多...
python+selenium 定位到元素,无法点击的解决方法

python+selenium 定位到元素,无法点击的解决方法

今天小编就为大家分享一篇pythonselenium 定位到元素,无法点击的解决方法&#xff0c;具有很好的参考价值&#xff0c;希望对大家有所帮助。一起跟随小编过来看看吧 selenium.common.exceptions.WebDriverException: Message: Element is not clickable at point (234.75, 22)…
阅读更多...
github新建仓库推送代码教学

github新建仓库推送代码教学

之前一直用gitee&#xff0c;准备转到github。因为一步一步尝试。如果是新手或许文章会有帮助 点击 new 创建 拉代码 Idea 打开 复制一个 pom 文件作为 maven 管理 提交代码 不出意外的出意外&#xff0c;报错 点击authorize JetBrains 失败 分析问题 本质就是没有…
阅读更多...
搭建一个高效的Python开发环境

搭建一个高效的Python开发环境

“工欲善其事&#xff0c;必先利其器”&#xff0c;这里我们来搭建一套高效的 Python 开发环境&#xff0c;为后续的数据分析做准备。 关于高效作业&#xff0c;对于需要编写 Python 代码进行数据分析的工作而言&#xff0c;主要涉及两个方面。 1. 一款具备强大的自动完成和错…
阅读更多...
如何快速获取抖音新用户/用户信息

如何快速获取抖音新用户/用户信息

一、快速获取抖音用户信息意味着什么&#xff1f; 抖音是一款热门的短视频社交平台&#xff0c;拥有海量用户和高度活跃的商业生态。用户逐渐增多&#xff0c;庞大的用户也意味着隐藏着庞大的市场和商机&#xff0c;用户的偏好、关注点等信息都时刻影响着商业的效益&#xff0…
阅读更多...
推特（Twitter）蓝V

推特（Twitter）蓝V

点击个人订阅 这里需要一张visa卡才可以订阅&#xff0c;点击获取 订阅成功
阅读更多...
2024 年混合云：趋势和预测

2024 年混合云：趋势和预测

混合云环境对于 DevOps 团队变得越来越重要&#xff0c;主要是因为它们能够弥合公共云资源的快速部署与私有云基础设施的安全和控制之间的差距。这种环境的混合为 DevOps 团队提供了灵活性和可扩展性&#xff0c;这对于大型企业中的持续集成和持续部署 (CI/CD) 至关重要。 在混…
阅读更多...
GitHub的2FA验证问题解决工具

GitHub的2FA验证问题解决工具

文章目录 前言认识2FA开源工具使用&#xff1a;AuthenticatorPro获取AuthenticatorPro的安卓APK如何使用 参考文章 前言 打开GitHub跳出来这个提示&#xff0c;需要进行验证&#xff1a; 如何解决呢&#xff1f;方案有很多&#xff0c;我们可以使用开源的一个工具&#xff1a;…
阅读更多...
查看ios app运行日志

查看ios app运行日志

摘要 本文介绍了一款名为克魔助手的iOS应用日志查看工具&#xff0c;该工具可以方便地查看iPhone设备上应用和系统运行时的实时日志和奔溃日志。同时还提供了奔溃日志分析查看模块&#xff0c;可以对苹果奔溃日志进行符号化、格式化和分析&#xff0c;极大地简化了开发者的调试…
阅读更多...
基于机器视觉工业相机的Raw图像和Bitmap图像的保存和转换（C#代码，UI界面版）

基于机器视觉工业相机的Raw图像和Bitmap图像的保存和转换（C#代码，UI界面版）

基于机器视觉工业相机的Raw图像和Bitmap图像的保存和转换&#xff08;C#代码&#xff0c;UI界面版&#xff09; 工业相机图像格式工业相机实现Raw图像和Bitmap图像的保存和转换的技术背景在相机SDK中获取图像转换图像的代码分析工业相机回调函数里保存Bitmap图像数据工业相机图…
阅读更多...
Sectigo的OV多域名通配符证书与通配符证书

Sectigo的OV多域名通配符证书与通配符证书

Sectigo的OV多域名通配符SSL证书和通配符SSL证书都可以同时保护多个域名记录&#xff0c;但是Sectigo的OV多域名通配符SSL证书并不是多域名SSL证书加通配符SSL证书&#xff0c;而是多个泛域名&#xff0c;并不包括泛域名的主域名。今天就随SSL盾小编了解Sectigo旗下的OV多域名通…
阅读更多...
【AI】人工智能爆发推进器之卷积神经网络

【AI】人工智能爆发推进器之卷积神经网络

目录 一、什么是卷积神经网络 1. 卷积层&#xff08;Convolutional Layer&#xff09; 2. 激活函数&#xff08;Activation Function&#xff09; 3. 池化层&#xff08;Pooling Layer&#xff09; 4. 全连接层&#xff08;Fully Connected Layer&#xff09; 5. 训练过程…
阅读更多...
部署YUM软件仓库

部署YUM软件仓库

借助于YUM软件仓库.可以完成安装、卸载、自动升级rpm软件包等任务&#xff0c;能够自动查找并解 决rpm包之间的依赖关系&#xff0c;而无须管理员逐个.手工地去安装每个rpm包&#xff0c;使管理员在维护大量Linux 服务器时更加轻松自如。.特别是在拥有大量Linux主机的本地网络中…
阅读更多...
代码随想录27期|Python|Day27|回溯算法|39.组合总和|40.组合总和II|131.分割回文串

代码随想录27期|Python|Day27|回溯算法|39.组合总和|40.组合总和II|131.分割回文串

39. 组合总和 在Day24组合问题的模版上加上了一个“可以重复选用当前值”的选项&#xff0c;递归中调用backtracking的idx由i 1改为i&#xff1a; self.backtracking(i, path, res, candidates, target) # 起始位置变成i,可以重复使用当前的值 class Solution(object):def…
阅读更多...
最新国内使用GPT4教程，GPT语音对话使用，Midjourney绘画，ChatFile文档对话总结+DALL-E3文生图

最新国内使用GPT4教程，GPT语音对话使用，Midjourney绘画，ChatFile文档对话总结+DALL-E3文生图

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;文档对话总结DALL-E3文生图&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和…
阅读更多...
ESP8266 ESP-01/01s 工作模式与固件下载烧录接线

ESP8266 ESP-01/01s 工作模式与固件下载烧录接线

注意点&#xff1a; ESP8266 ESP-01与 ESP8266 ESP-01s接线类似 。本文使用的是ESP8266 ESP-01 WIFI模块&#xff0c;详细信息见如下图片。本文固件下载的是ESP8266 的MQTT固件&#xff0c;下载其它固件流程一致。本文使用的是杜邦线连接面包板来进行使用&#xff0c;与使用开发…
阅读更多...
Bert模型from_pretrained报网络错误解决办法

Bert模型from_pretrained报网络错误解决办法

问题描述&#xff1a; 服务器或者本地运行以下代码时报网络连接错误&#xff1a; from transformers import AutoTokenizermodel_checkpoint "distilbert-base-uncased" tokenizer AutoTokenizer.from_pretrained(model_checkpoint, use_fastTrue, cache_dir./cac…
阅读更多...
【大数据HA】HAProxy实现thrift协议HMS服务的高可用-附Chatgpt协助截图

【大数据HA】HAProxy实现thrift协议HMS服务的高可用-附Chatgpt协助截图

背景 之前安装了HMS(Hive metastore service)&#xff0c;独立于hive运行&#xff0c;安装部署过程见我下面列出的另一篇文章&#xff0c;需要为它建立HA高可用功能。防止在访问时出现单点故障问题。 【大数据】Docker部署HMS(Hive Metastore Service)并使用Trino访问Minio-C…
阅读更多...
fragstats：景观指数趋势分析

fragstats：景观指数趋势分析

作者&#xff1a;CSDN _养乐多_ 本文将介绍景观指数时间序列的趋势分析&#xff0c;包括趋势类型、斜率、截距等。以及景观指数突变分析所用的软件和 python 代码。 结果如下图所示&#xff0c; 图1 趋势分类图 图2 MK趋势分析 文章目录 一、景观指数计算二、景观指数时间序…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站