js二级菜单
程序员文章站
2022-03-11 19:08:46
...
二级菜单
具体代码
<!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>
效果图
上一篇： 戴尔发布2022款G系列电竞显示器：27寸165Hz高刷电竞屏
下一篇： 缺少配合