【HTML+CSS】手把手制作上滑菜单栏！（1）

*{

    margin: 0px;

    padding: 0px;

}

.container{

    width: 100%;

    height: 200vh;

}

.show{

    text-align: center;

    position: sticky;

    width: 70%;

    height: 30px;

    background:black;

    padding: 10px 0px;

    color: white;

    font-weight: bold;

    font-size: 25px;

    border-radius: 50px;

    top: 650px;

    left: 15%;

    cursor: pointer;

    transition: 0.3s;

}

.show:hover{

    background: white;

}

.btn{

    z-index: -1;

}

.show:hover.content{

    top: 30%;

}

.content{

    position: fixed;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: lightslategray;

    top: 100%;

    left: 0%;

    width: 100%;

    height: 70%;

    z-index: 1;

    transition: 0.5s;

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

}

.content p{

    width: 100%;

    line-height: 50px;

    height: 50px;

    font-size: 20px;

    color: white;

    border-bottom-style: solid;

    border-bottom-color: lightgray;

    border-width: 2px;

}