css实现鼠标滑过展现菜单

最新推荐文章于 2024-06-01 17:33:11 发布
最新推荐文章于 2024-06-01 17:33:11 发布
阅读量3.7k 收藏 7
点赞数 1
分类专栏： HTML/CSS 文章标签： 鼠标滑过出现菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_37198552/article/details/93848078
版权

这是在界面中浮出的菜单，当鼠标移上去时会出现二级菜单
（该需求在查找时发现资料比较凌乱，所以按照查找到的资料，配合图进行直观的展示）
效果图：

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>纯css向右展开多级导航菜单代码</title>
	<style>   
	 *{margin: 0;padding: 0;}   
	  .qdxw{ margin:100px 100px;}    
	  .qdxw ul a{width: 200px;font-family: '微软雅黑';font-size: 14px;color: #aaa;text-decoration: none;}    
	  .qdxw ul a:hover{color: #000;text-decoration: none;}    
	  .qdxw ul li{width: 200px;height: 35px;line-height: 35px;text-align: center;position: relative;}   
	  .qdxw ul li:hover{background: #aaa;}   
	  .qdxw ul{width: 200px;height: auto;position: absolute;background: #ccc;list-style: none;}    
	  .qdxw ul.nav2{left: 199px;top: 0;display: none;}   
	  .qdxw ul.nav3{left: 199px;top: 0;display: none;}    
	  .qdxw .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}    
	  .qdxw .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}
	</style>
	</head>
	<body>
	<!--代码部分-->
		<div class="qdxw">
		<ul class="nav1">    
			<li class="li1">  <a href="#">一级导航是我们</a>        
				<ul class="nav2">            
					<li class="li2"><a href="#">二级导航</a>                
						<ul class="nav3">                    
							<li class="li3"><a href="#">三级导航</a></li>                    
							<li class="li3"><a href="#">三级导航</a></li>               
						 </ul>            
					</li>            
					<li class="li2"><a href="#">二级导航</a></li>        
				</ul>    
			</li>
		</ul>
		</div>
		<!--代码部分end-->
	</body>
疯魔成佛
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css鼠标经过弹出子菜单特效
在线学习web前端开发教程
01-17 607
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name=viewport content='width=device-width, initial-scale=1, maximum-scale=1'> <title>Hello React!</t...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
weixin_39775029的博客
05-31 639
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果。分享给大家供大家参考。具体如下：这是一款鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/...
鼠标滑过演示
saoang的博客
03-02 155
这个案例都是css组成的 接下来看一下HTML的代码 接下来的是css的样式 css部分主要是运用了 stroke() 的方法绘制当前路径 ，使得的那个线条围绕那个五角星来运行。 从而呈现出鼠标线条就会形成一个外边距的样式， 五角星的制作方法 points是定义多边形每个角的 x 和 y 坐标 points=“10,1 4,18 19,6 1,6 16,18” 这个是最小的五角星 标签用来创建含有不少于三个边的图形 stroke-dashoffset: -200000px;这个是转动的距离。
CSS动画效果（鼠标滑过按钮动画）
最新发布
2303_82176667的博客
06-01 614
网页设计中的按钮不仅是用户交互的桥梁，更是展示创意和技术的平台。酷炫的鼠标经过动画效果能够显著提升按钮的吸引力，激发用户的点击欲望，从而增加用户参与度。本文将介绍几种常用且引人注目的CSS按钮动画效果。
jQuery鼠标经过滑动展开菜单.zip
05-24
jQuery鼠标经过滑动展开菜单基于jQuery.1.10.2.min.js制作，鼠标悬停菜单，展开动画效果。
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
09-24
主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参考下
纯css实现鼠标滑过弹出层效果
09-25
在本文中，我们将深入探讨如何使用纯CSS实现鼠标滑过时弹出层的效果。这个技术可以用于创建动态的、交互式的网页元素，如菜单、提示信息或图像预览，而无需依赖JavaScript。以下是一个详细的步骤解析： 首先，为了...
纯CSS实现鼠标经过显示子菜单代码
01-23
"纯CSS实现鼠标经过显示子菜单"是一个常见的需求，特别是在构建多级导航结构时。这个技术利用CSS的伪类选择器和布局属性，无需JavaScript干预，就能实现鼠标悬停时自动展开或隐藏子菜单。下面将详细讲解如何实现这一...
div+css实现鼠标经过背景高亮的导航菜单代码
09-24
主要为大家介绍了div+css实现鼠标经过背景高亮的导航菜单代码,涉及css样式设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
CSS3鼠标经过导航菜单动画效果代码
06-05
本示例中，我们将深入探讨如何使用CSS3实现鼠标经过导航菜单时的动画效果。 首先，`index.html`文件是网页的主体结构，它包含了HTML元素，如`<nav>`用于创建导航菜单，`<ul>`和`<li>`用于构建菜单项。CSS3的鼠标...
十一、基于CSS实现鼠标滑过显示详情
一个孤独漫步者的遐想的博客
05-04 810
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标滑过显示详情</title> <!-- IMPORT CSS --> <style> *{ padding:0; margin:0; } .
基于JS与CSS实现鼠标滑过显示详情
宇智波带土
10-14 1408
JS实现鼠标滑过显示详情 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标滑过详情</title> <style> *{ margin: 0; padding: 0; } #box{ ...
简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果
vvv3171071的博客
10-27 5133
页面样式如下： html： <li> <div class="nav-tab">技术分析</div> <ul class="nav-menu"> <li>音视频</li> <li>语言</li> <li>Firebase</li> <li>Google AAB</li> <li>百度</li> </ul&gt
避坑：css二级菜单的隐藏与显示问题
前端你鹏哥的博客
06-26 830
我们想要的效果是鼠标移入首页菜单的时候显示下方二级菜单，并且可以选中下方二级带单，但是由于层级问题，导致我们只要鼠标移到首页之外的区域二级菜单就会隐藏。由于层级问题导致css设置的二级菜单的显示在移出菜单后二级菜单又隐藏了。解决办法就是使用z-index属性设置二级菜单的层级样式。
纯CSS实现二级导航下拉菜单--css的简单应用
热门推荐
zhaiyq的博客
08-07 1万+
思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。 1、纯CSS二级导航下拉菜单代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" c...
div+css 纵向导航菜单及二级菜单弹出
janefir的专栏
11-26 6717
1） 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-decoration: none; } a:hover { color: #F00; } #menu { width: 100px; border:1px solid #CCC; } #menu
CSS 实现鼠标悬停上弹出二级菜单动画显示（二）
分享我的点点滴滴，在成长路上与你同行！
09-08 1470
效果： HMTL页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 去掉小黑点 */ ul{ list-style: none; } /* 隐藏 */ ul>li ul{ display: none.
html鼠标经过下拉菜单
06-08
可以使用HTML和CSS实现鼠标经过下拉菜单的效果。以下是一个简单的示例代码： HTML部分： ``` 下拉菜单 菜单项1 菜单项2 菜单项3 ``` CSS部分： ``` .dropdown { position: relative; display: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值