二级菜单

最新推荐文章于 2023-08-13 09:28:11 发布

ZZZ --- jh

最新推荐文章于 2023-08-13 09:28:11 发布

阅读量288

点赞数 2

分类专栏： demo

本文链接：https://blog.csdn.net/ZZZ___jh/article/details/108782600

版权

demo 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

二级菜单

HTML代码 :

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

css代码 :

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