Let's briefly share the preparation of the secondary menu
title
I believe many people know the preparation of the secondary menu, but I encountered some problems in this aspect at the time, so I wanted to make a simple record.
Code part
<style>
/* 大盒子*/
.main{
width:500px;
height:500px;
position:relative;
}
/* 隐藏层*/
.main-content{
position:absolute; /*在这里定位所隐藏层的位置于你想安置的地方
例：top:500px;这时隐藏层就处于正下方 */
width:500px;
height:0px; /*隐藏层的高度渐变前提*/
background-color:pink;
transition:all 0.5s;
}
/*伪类*/
.main:hover .main-content{
hight:500px;
}
</style>
<body>
<div class="main">
<span>移动到我这里</span>
<div class="main-content">
<p>嘿嘿！我出来了</p>
</div>
</div>
</body>
In this way, the writing of the secondary menu can be realized and displayed slowly over time.
Note : In fact, if you use display:inline-block/block; for these two attributes, you cannot achieve the transition attribute
and another one The transition method is to use animation, that is, use the translate property in transform, just use translate.
Please correct the mistakes .