html下拉菜单被轮播图遮挡,纯html+css的轮播图问题

html：

1

2

3

css：

.slide{

width: 200px;

height: 80px;

position: relative;

margin: 0 auto;

overflow: hidden;

background-color: #f00;

}

.slide-content{

width: 100%;

height: 100%;

position: absolute;

right: -100%;

top: 0;

animation: slider-out 0.5s linear;

}

.slide-content:target{

right: 0%;

animation: slider-in 0.5s linear;

}

@keyframes slider-out{

from{

right: 0%;

}

to{

right: -100%;

}

}