下面简单分享一下二级菜单的编写
title
相信很多人都晓得二级菜单的编写，但是我在当时在这方面遇到了些问题，所以想要进行简单的的记录。
代码部分
<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>
这样就可以实现二级菜单的编写及随着时间缓缓展出
注意：实际上如果对这两个使用display:inline-block/block;这类的属性；则无法实现过渡transition属性
并且另外一种过渡方法是使用动画，也就是使用transform中的translate属性，使用translate即可。
错误之处，还请斧正。