js二级菜单

最新推荐文章于 2024-05-09 00:14:24 发布

starry__sty

最新推荐文章于 2024-05-09 00:14:24 发布

阅读量198

点赞数

分类专栏： js效果图文章标签： javascript

本文链接：https://blog.csdn.net/starry__sty/article/details/108788966

版权

js效果图专栏收录该内容

10 篇文章 2 订阅

订阅专栏

二级菜单

具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.top{
				width: 500px;
				height:50px;
				background: #ccc;
				margin: 0 auto;
				list-style: none;
			}
			.top>li{
				float: left;
				color: #000080;
				line-height: 50px;
				padding: 0 12px;
				font-size: 24px;
			}
			.f_hop{
				position: relative;
			}
			.hop{
				width: 191px;
				height: 35px;
				position: absolute;
				display: none;
			}
			.f_hop:hover .hop{
				display: block;
			}
			.f_txt{
				position: relative;
			}
			.txt{
				width: 500px;
				height: 50px;
				background: green;
				position: absolute;
				left:-240px;
				color: #fff;
				font-size: 14px;
				line-height:22px ;
				display: none;
			}
			.pad{
				padding-left:20px ;
			}
			.txt>p>span:hover{
				color: yellow;
			}
			.f_txt:hover .txt{
				display: block;
			} 
		</style>
	</head>
	<body>
		<ul class="top">
			<li>我的京东</li>
			<li>我的会员</li>
			<li class="f_txt">
				我的订单
				<div class="txt">
					<p>
						<span>
							啤酒订单
						</span>
						<span class="pad">羊肉串订单</span>
					</p>
					<p><span>腰子订单</span><span class="pad">花生米</span></p>
				</div>
			</li>
			<li class="f_hop">
				手机京东
			    <div class="hop">
			    	<img src="img/100.png"/>
			    </div> 
			</li>
		
		</ul>
	</body>
</html>

效果图
在这里插入图片描述

starry__sty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js二级菜单

二级菜单具体代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .top{ width: 500px; height:50px; background: #c
复制链接

扫一扫

专栏目录