绝对定位练习——小米商城菜单侧边栏

LOXOI

于 2023-12-22 22:51:35 发布

阅读量170

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/LOXOI/article/details/135162499

版权

成果展示：

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城侧边栏</title>

<style>
 
    #box1{
 
        width: 240px;
 
        margin: auto;
 
        margin-top: 100px;
 
        display: flex;
 
    }
	.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: 100px;
				 
		    height: 35px;
				 
		    line-height: 35px;
				 
		    position: relative;
				 
		    top: -36px;
				 
		    left: 80px;
	 
	    }
 
    #b1:hover{
 
        overflow: visible;
 
        background-color: mediumturquoise;
 
        color: white;
 
        z-index: 999;
 
        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">Mate系列</div>
						<div id="b1-1-1" class="son2"><img src="https://img2.baidu.com/it/u=2282740376,1085472498&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="" /></div>
                        <div id="b1-1-1" class="son2">P系列</div>
						<div id="b1-1-1" class="son2">Pocket系列</div>
						<div id="b1-1-1" class="son2">nova系列</div>
						<div id="b1-1-1" class="son2">华为畅享系列</div>
                </div>
			</div>
</body>
</html>