Web前端---绝对定位菜单

我思故我在420

已于 2024-01-14 19:01:27 修改

阅读量386

点赞数 8

文章标签：前端

于 2023-12-22 23:02:06 首次发布

本文链接：https://blog.csdn.net/2302_81055059/article/details/135162612

版权

1.目标图：

2.实现代码：

<style>
 
    #box1{
 
        width: 240px;
 
        margin: auto;
 
        margin-top: 100px;
 
        display: flex;
 
        flex-direction: row;
 
    }
	.son1{
			 
	    border: 1px solid lightgrey;
			 
	    background-color: lightpink;
			 
	    text-align: center;
			 
	    width: 80px;
			 
	    height: 35px;
			 
	    line-height: 35px;
			 
	    overflow: hidden;
			 
	}
	.son2{
			 
	    border: 1px solid lightgrey;
			 
	    background-color: rgb(247, 159, 127);
			 
	    text-align: center;
			 
	    width: 180px;
			 
	    height: 60px;
			 
	    line-height: 35px;
			 
	    position: relative;
			 
	    top: -36px;
			 
	    left: 80px;
 
    }
 
    #b1:hover{
 
        overflow: visible;
 
        background-color: mediumturquoise;
 
        color: white;
 
        z-index: 999;
 
        cursor: pointer;
 
    }
 
    .son1:hover,.son2:hover{
 
        background-color: mediumturquoise;
 
        cursor: pointer;
 
    }
 
    #b1-1:hover{
 
        overflow: visible;
 
        background-color: mediumturquoise;
 
        z-index: 999;
 
        cursor: pointer;
 
    }
 
</style>
 
<body>
 
    <div id="box1">
                <div id="b1-1" class="son1">
 
                    手机
 
                    <div>
 
                        <div id="b1-1-1" class="son2"><img src="https://img0.baidu.com/it/u=2751713341,4226842008&fm=253&fmt=auto&app=138&f=JPEG?w=803&h=500" alt="" width="60px;" height="57px"/>Mate系列</div>
                        <div id="b1-1-1" class="son2"><img src="https://download-c-retail.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/phones/p60/images/design/huawei-p60-id.png" alt="" width="60px" height="57px"/>P系列</div>
						<div id="b1-1-1" class="son2"><img src="https://p3.toutiaoimg.com/tos-cn-i-qvj2lq49k0/649d95da409542ffa7eddba8f456a828~tplv-tt-large.image" alt="" width="60px" height="57px"/>Pocket系列</div>
						<div id="b1-1-1" class="son2"><img src="https://img2.baidu.com/it/u=616438917,1999920684&fm=253&fmt=auto&app=138&f=JPEG?w=813&h=500" alt="" width="60px" height="57px"/>nova系列</div>
						<div id="b1-1-1" class="son2"><img src="https://img2.baidu.com/it/u=3803097368,2975783155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" width="60px" height="57px"/>华为畅享系列</div>
                    </div>
</body>

3.成果展示：