求分享多级菜单,移动到下一级菜单上时上一级菜单也不消失的技巧

再看我一眼 2014-01-05 05:59:34

有三层菜单,第二层,第三层都是弹出的

鼠标移动到第三层菜单的时候,菜单二也不消失. 总之就是常规的规则,但是没想到很好的解决办法, 求教技巧

可以用js原生或者jquery框架

三层菜单目前采用DIV相对定位,可以略有重叠

...全文

213 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

孤飞不倦 2014-01-07

打赏
举报

引用 5 楼 anyilaoliu 的回复:

[quote=引用 4 楼 MengYouXuanLv 的回复:]


<!DOCTYPE html>
<html>
<head>
<title></title>
<style>    
	ul,li{
		list-style:none;
		padding:0;
		margin:0;
		border:1px solid;
		width:98px;
	}

	li{
		position:relative;
		overflow:hidden;
	}
	li>ul{
		position:absolute;
		top:0;
		left:98px;
	}
	li:hover{
		overflow:visible;
	}

</style>
</head> 
<body>
	<ul>
		<li>
			<span>1</span>
			<ul>
				<li><span>1-1</span>
					<ul>
						<li>1-1-1</li>
						<li>1-1-2</li>
						<li>1-1-3</li>
					</ul>
				</li>
				<li><span>1-2</span>
					<ul>
						<li>1-2-1</li>
						<li>1-2-2</li>
						<li>1-2-3</li>
					</ul>
				</li>
				<li><span>1-3</span></li>
			</ul>
		</li>
		<li><span>2</span></li>
		<li><span>3</span></li>
	</ul>
</body>
<script>
</script>
</html>

我感动得要流泪了好厉害,真心好厉害,纯CSS实现多级菜单效果感谢分享.[/quote] 这个真心不错啊。简洁有效。收藏了。

再看我一眼 2014-01-07

打赏
举报

引用 4 楼 MengYouXuanLv 的回复:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style>    
	ul,li{
		list-style:none;
		padding:0;
		margin:0;
		border:1px solid;
		width:98px;
	}

	li{
		position:relative;
		overflow:hidden;
	}
	li>ul{
		position:absolute;
		top:0;
		left:98px;
	}
	li:hover{
		overflow:visible;
	}

</style>
</head> 
<body>
	<ul>
		<li>
			<span>1</span>
			<ul>
				<li><span>1-1</span>
					<ul>
						<li>1-1-1</li>
						<li>1-1-2</li>
						<li>1-1-3</li>
					</ul>
				</li>
				<li><span>1-2</span>
					<ul>
						<li>1-2-1</li>
						<li>1-2-2</li>
						<li>1-2-3</li>
					</ul>
				</li>
				<li><span>1-3</span></li>
			</ul>
		</li>
		<li><span>2</span></li>
		<li><span>3</span></li>
	</ul>
</body>
<script>
</script>
</html>

我感动得要流泪了好厉害,真心好厉害,纯CSS实现多级菜单效果感谢分享.

allali 2014-01-06

打赏
举报


<!DOCTYPE html>
<html>
<head>
<title></title>
<style>    
	ul,li{
		list-style:none;
		padding:0;
		margin:0;
		border:1px solid;
		width:98px;
	}

	li{
		position:relative;
		overflow:hidden;
	}
	li>ul{
		position:absolute;
		top:0;
		left:98px;
	}
	li:hover{
		overflow:visible;
	}

</style>
</head> 
<body>
	<ul>
		<li>
			<span>1</span>
			<ul>
				<li><span>1-1</span>
					<ul>
						<li>1-1-1</li>
						<li>1-1-2</li>
						<li>1-1-3</li>
					</ul>
				</li>
				<li><span>1-2</span>
					<ul>
						<li>1-2-1</li>
						<li>1-2-2</li>
						<li>1-2-3</li>
					</ul>
				</li>
				<li><span>1-3</span></li>
			</ul>
		</li>
		<li><span>2</span></li>
		<li><span>3</span></li>
	</ul>
</body>
<script>
</script>
</html>