鼠标悬停显示二级菜单HTML+CSS

已于 2022-12-12 08:32:38 修改
阅读量2.8k 收藏 15
点赞数 1
分类专栏： JS练习题 文章标签： html css 前端
于 2022-11-27 20:21:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/akeqi/article/details/128068851
版权
本文介绍了如何使用HTML和CSS通过a标签的:hover状态来创建一个鼠标悬停时显示的二级菜单。通过.box > ul > li:hover > .er选择器，实现了当鼠标悬停在一级菜单上时，二级菜单的可见效果。
摘要由CSDN通过智能技术生成

通过a标签的：hover状态完成

语法：.box > ul > li:hover > .er----------hover之前是一级菜单，之后是要显示的二级菜单

完整代码： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/CSS/reset.css">
    <style>
        .box {
            width: 300px;
            height: 25px;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        /* 设置一级菜单 */
        .box>ul>li {
            width: 90px;
            height: 25px;
            text-align: center;
            background-color: bisque;
最低0.47元/天 解锁文章
纯纯纯的小白
关注
专栏目录
js实现鼠标悬停显示二级菜单
03-10
js实现鼠标悬停显示二级菜单的具体内容及代码
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
09-24
在实现二级菜单的时候，通常会给菜单项（li元素）设置:hover状态，当鼠标指针悬停在菜单项上时，通过CSS改变其子元素（例如子菜单ul元素）的display属性从none（隐藏）变为block（显示），从而实现子菜单的显示。...
前端鼠标悬停显示二级菜单
2301_77523055的博客
05-13 298
【代码】前端鼠标悬停显示二级菜单。
【HTML】模拟二级菜单【附源代码】
最新发布
Young_Pro的博客
08-25 1351
通过 Html 搭配 CSS 模拟二级菜单的实现
导航，鼠标悬停出现二级菜单
10-25 1837
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> Horizontal Drop Down Menus ul {  margin: 0;  padding: 0;  list-style: none;  width: 150px;  borde
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
热门推荐
王佳斌
10-12 2万+
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单），HTML css3菜单鼠标移入显示下方二级菜单，用纯CSS实现鼠标经过后出现下拉菜单，css实现网页中鼠标移入出现下拉框，用纯CSS实现鼠标经过后出现下拉菜单，鼠标移动下拉菜单(下拉菜单之纯CSS实现方法) 鼠标悬停显示下拉菜单，html鼠标悬停下拉列表，CSS实现鼠标悬停出现下拉菜单及二级菜单。CSS 下拉菜单 | 菜鸟教程，官方教程。hover菜单时显示隐藏的div盒子，里面有二级菜单。
html导航栏制作css伪类,利用:hover伪类制作二级导航菜单
weixin_39641334的博客
06-22 536
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/* {margin:0; padding:0; border:0;}a {text-decoration:none; color:#000;}body {font-size:12px; font-family:"微软雅黑";}ul,ol {list-style:none;}ul ...
鼠标悬停效果显示二级列表
jasmyn518的博客
12-09 3605
加载页面时显示一级列表，鼠标悬停时显示二级列表，离开时隐藏。 HTML代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>list</title> <link rel="stylesheet" href="list.css"> </head> <body> <ul id="title"> <l
HTML5 CSS3 鼠标悬停动画展开的二级菜单.rar
07-10
在这个“HTML5 CSS3 鼠标悬停动画展开的二级菜单”示例中，我们可以深入学习到这两项技术在创建动态交互式菜单方面的应用。 首先，HTML5引入了一些新的元素，比如（导航）、（无序列表）、（列表项）等，这些元素为...
hover鼠标悬停导航滑动显示二级下拉菜单
06-04
这个模式允许用户在鼠标悬停在一级菜单项上时，二级菜单会以滑动效果出现，提供更多的子选项。 首先，我们需要了解HTML基础结构。在`index.html`文件中，二级下拉菜单通常由`<ul>`和`<li>`元素构建。一级菜单项是`...
鼠标悬浮显示二级菜单效果的jquery实现
10-25
当鼠标悬停在元素上时，`expand`函数会被触发，通过jQuery的`show`和`animate`方法，二级菜单会平滑地展开并逐渐显示出内容。当鼠标离开时，则调用`collapse`函数将菜单收起。 注意，由于文档内容是通过OCR扫描得到...
鼠标滑过导航菜单、展示二级下拉菜单
06-04
鼠标滑过导航菜单、展示二级下拉菜单
导航条制作鼠标悬停下拉二级导航菜单
06-04
导航条制作鼠标悬停下拉二级导航菜单
jQ鼠标滑过显示二级下拉菜单代码
10-08
jQ鼠标滑过显示二级下拉菜单代码jQ鼠标滑过显示二级下拉菜单代码
jquery鼠标滑过显示二级下拉菜单代码
01-18
jquery鼠标滑过显示二级下拉菜单代码，代码完成可运行。包括html, js, css.
css3导航条制作鼠标悬停下拉二级导航菜单
06-04
css3导航条制作鼠标悬停下拉二级导航菜单
css鼠标悬浮显示二级菜单,CSS3 悬停时自动滑出的二级菜单
weixin_42513512的博客
08-03 550
HTML导入代码模板：Sliding secondary navigation with CSSBeveragesOur CoffeesWhole Bean CoffeeGround CoffeeStarbucks VIA®K-Cup® PacksVerismo™ System PodsPortion PacksView All CoffeesFind Your Perfect CoffeeSta...
Css实现鼠标滑过，一二级菜单显隐问题
weixin_44912745的博客
03-13 1169
Css实现鼠标滑过，一二级菜单显隐问题
二级导航--鼠标悬浮菜单出现二级菜单
飞翔的熊blabla
08-28 3623
二级导航–鼠标悬浮菜单出现二级菜单 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head &gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标悬浮菜单出现二级菜单&lt;/title &gt; &lt;style&gt; a{ color: #fff; text-dec
Jquery实现鼠标悬停显示二级菜单
06-03
您的问题是如何使用jQuery实现鼠标悬停显示二级菜单，对吗？ 以下是一个简单的示例代码，可以帮助您实现这个效果： HTML代码： ``` <ul class="menu"> <li><a href="#">菜单1</a> <ul class="sub-menu"> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul class="sub-menu"> <li><a href="#">子菜单4</a></li> <li><a href="#">子菜单5</a></li> <li><a href="#">子菜单6</a></li> </ul> </li> <li><a href="#">菜单3</a></li> </ul> ``` CSS代码： ``` .menu { list-style: none; padding: 0; margin: 0; } .menu > li { display: inline-block; position: relative; } .menu > li > a { display: block; padding: 10px; text-decoration: none; color: #333; } .sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #f5f5f5; border: 1px solid #ddd; padding: 10px; z-index: 1; } .sub-menu > li > a { display: block; text-decoration: none; color: #333; } .menu > li:hover .sub-menu { display: block; } ``` jQuery代码： ``` $(document).ready(function() { $('.menu li').hover(function() { $(this).find('.sub-menu').stop().slideDown(200); }, function() { $(this).find('.sub-menu').stop().slideUp(200); }); }); ``` 解释一下上面的代码： 1. 首先定义了一个ul列表，每个列表项li对应一个菜单项。 2. 每个菜单项li中包含一个a链接和一个子菜单ul，子菜单ul中包含了该菜单项对应的二级菜单。 3. 子菜单ul默认设置为display: none，即不显示。 4. 当鼠标悬浮到某个菜单项li上时，通过jQuery的hover()方法选中该菜单项下方的子菜单ul，并使用slideDown()方法使其向下展开，即显示出来。 5. 当鼠标移开时，使用slideUp()方法使子菜单ul向上收起，即隐藏起来。 您可以根据具体的需求，调整CSS样式和jQuery代码，实现您想要的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值