下拉显示
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 30px;
background-color: red;
text-align: center;
line-height: 30px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
.box:hover ul{
display: block;
}
ul{
width: 100px;
/* display: block; */
border: 1px solid deeppink;
left: -1px;
position: absolute; /*只有当为absolute的时候才能用left:-1px*/
list-style: none;
display: none;
}
li:hover{
background-color: gray;
}
</style>
</head>
<body>
<div class="box">
卖家中心
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
效果图如下：左边为正常是候，右边为hover时候效果