使用HTML+CSS实现鼠标划过的二级菜单栏

最新推荐文章于 2023-03-13 15:59:48 发布
最新推荐文章于 2023-03-13 15:59:48 发布
阅读量2k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_xing/article/details/80392183
版权 
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				text-align:center;
			}
			.menuDiv{
				border:1px solid #aac;
				overflow:hidden;
				display:inline-block;
			}
			.menuDiv a{
				text-decoration:none;
			}
			.menuDiv ul,.menuDiv li{
				list-style:none;
				margin:0px;
				padding:0px;
				float:left;
			}
			.menuDiv>ul>li>ul{
				position:absolute;
				display:none;
			}
			.menuDiv>ul>li>ul>li{
				float:none;
			}
			.menuDiv>ul>li:hover ul{
				display:block;
			}
			.menuDiv>ul>li>a{
				width:120px;
				display:block;
				line-height:40px;
				background-color:#AFE;
				color:black;
				text-align:center;
				border-left:1px solid #bbf;
			}
			.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;
				display:block;
				line-height:36px;
				background-color:#EFF;
				color:#456;
				text-align:center;
				border:1px solid #ccc;
				border-top:none;
			}
			.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;
			}
			.menuDiv>ul>li>ul>li>a{
				background-image:url('./list.gif');
				background-repeat:no-repeat;
				background-position-x:23px;
				background-position-y:13px;
			}
		</style>
	</head>


	<body>
		<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>
						<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>

Mason丶Liu
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现二级菜单自动打开,纯CSS实现鼠标滑过显示子菜单的二级菜单效果
weixin_34824634的博客
05-31 1126
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
纯CSS实现鼠标悬浮式二级菜单
12-05 1865
<style> .fmenu { position: relative; } .fmenu .fsubmenu { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: #0b5ed7; width: 200px; .
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
12-13
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下： 这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/css-2level-mouse-over-show-menu-codes/ 具体代码如下： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://ww
CSS二级菜单
MPU的专栏
11-22 2359
 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>title>子叶：测试css菜单显示效果title>meta http-equiv="
二级菜单栏
Annierr的博客
01-16 359
二级菜单栏 这是我自己整理的关于web前端二级菜单栏的内容！纯粹用的html+css写出来的，用到的html标签主要有：div、li、ul。用到的css属性主要有：display、hover、float等 这是我第一次发博客，学web前端后自己整理的知识，望大家多指教！
css导航栏（二级菜单）
大大大鸡腿的博客
07-14 5910
效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航栏</title> <style> *{ mar
使用HTML+CSS实现鼠标划过的二级菜单栏的示例
09-28
通过这样的HTML和CSS结构，我们可以创建出一个响应鼠标划过事件的二级菜单栏。用户在鼠标悬停在一级菜单项上时，二级菜单会自动展开，提供更多的导航选项。这个简单的实现方法在实际网页设计中非常常见，它不仅易于...
vue实现鼠标移过出现下拉二级菜单功能
10-15
在 Vue 中实现鼠标移过出现下拉二级菜单的功能，可以通过结合 Vue 的响应式系统、条件渲染（v-if 或 v-show）以及 CSS 过渡动画来实现。下面我们将详细探讨如何实现这一功能。 首先，Vue 提供了 `transition` 组件...
Css实现鼠标滑过，一二级菜单显隐问题
最新发布
weixin_44912745的博客
03-13 1141
Css实现鼠标滑过，一二级菜单显隐问题
HTML 纯CSS二级菜单的导航
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2277031
css横向下拉二级导航菜单
04-10
这个效果还不错,主要是用于做导航条使用。。可以参考
制作下拉菜单（二级菜单）
YY的博客
09-13 646
二级菜单
html 悬停 二级菜单,使用HTML+CSS实现鼠标划过的二级菜单栏！
weixin_33255691的博客
06-03 1724
话不多说，先上效果图：1、鼠标没在上面image2、鼠标放在一级菜单上，展开二级菜单image3、鼠标放在二级菜单上image二级菜单测试/*为了使菜单居中*/body {padding-top:100px;text-align:center;}/* -------------菜单css代码----------begin---------- */.menuDiv {border: 2px soli...
html鼠标经过自动下拉菜单,用纯CSS实现鼠标经过后出现下拉菜单，实例讲解（附代码）...
热门推荐
weixin_36016360的博客
05-31 1万+
随便打开网上的任何一个网站，你会发现这些网站都有导航部分，而且有些导航在鼠标经过后，会出现下拉菜单，那这种下拉菜单怎么做呢？其实，用纯CSS就可以做导航下拉菜单。接下来，就和大家聊聊CSS怎么做下拉菜单，好，进入正题。HTML 部分：1、我们可以使用任何的 HTML 元素来打开下拉菜单，如：或 a 元素2、使用容器元素 (例如) 来创建下拉菜单的内容，并放在任何你想放的位置上。3、使用 元素来...
html鼠标经过自动下拉菜单,操作方法：在鼠标经过后使用纯CSS实现下拉菜单，并附有示例说明（代码）...
weixin_35909238的博客
05-31 1607
纯CSS实现鼠标移动到按钮上打开下拉菜单。CSS部分：.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.dropdown {position: relative;display: inline-block;}.dropdown-c...
css+html实现鼠标滑过出现下拉菜单
weixin_43312392的博客
02-14 1725
css+html实现鼠标滑过出现下拉菜单
鼠标经过显示下拉菜单
weixin_58414196的博客
12-28 577
【代码】鼠标经过显示下拉菜单。
使用HTML&css创建二级导航栏
qq_45915712的博客
11-08 9235
使用HTML&css创建二级导航栏创建一级导航栏创建二级导航栏 创建一级导航栏 使用 创建一个无序列表，即为一级导航栏 <ul> <li><a href="#">首页</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">师资队伍</a></li> <--!省略多个li
使用HTML+CSS+JS实现二级菜单的兼容性代码示例
本文将介绍如何使用HTML、CSS和JavaScript通过嵌套的`<ul>`和`<li>`元素创建一个兼容多种浏览器（包括IE6-9、谷歌和火狐）的简单二级菜单。示例代码包含了一个基本的菜单结构，并展示了如何通过JavaScript控制二级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值