Html 滑入菜单正在将其他元素推开

我的问题是，当你将鼠标悬停在“打开按钮”上时，它会将所有内容向下推，这是一个问题。它是用来打开图像的，我不知道怎么做。我曾经尝试过添加一些东西，比如浮动和改变位置标签，但似乎没有任何效果。这是我的密码：

html，
身体{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
溢出x：隐藏；
}
#酒吧{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
高度：64px；
背景色：#592881
}
#标志{
位置：相对位置；
顶部：-40px；
文本对齐：居中；
左：0；
右：0；
z指数：1；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
顶部：100px；
左：0；
背景：rgba（89,40,129,7）；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
文本对齐：居中；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：黑色；
显示：块；
过渡：0.3s；
位置：静态；
}
.侧导航a:悬停{
颜色：灰色；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：3s；
动画名称：淡入淡出；
动画持续时间：3s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
.集装箱{
位置：相对位置；
文本对齐：居中；
}
.幻灯片{
位置：相对位置；
身高：100%；
垂直对齐：中间对齐；
左边距：自动；
右边距：自动；
}
迈斯利德斯先生{
显示：块；
左：0；
右：0；
最大宽度：100%；
最大高度：自动；
垂直对齐：中间对齐；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.prev，
.下一个{
光标：指针；
位置：相对位置；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
.下一个{
浮动：对；
顶部：-500px；
边界半径：3px 0 3px；
}
上一篇{
左：0px；
顶部：-500px；
边界半径：3px 0 3px；
}
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
.页脚{
位置：相对位置；
背景色：#f1f1；
颜色：#A8A8A8；
字号：18px；
左侧填充：400px；
}
.覆盖{
浮动：左；
身高：70%；
宽度：0；
位置：相对位置；
z指数：1；
排名：0；
左：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.8）；
溢出x：隐藏；
过渡：.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
填充底部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.a:悬停，
.a：聚焦{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：300px）{
.覆盖{
字号：20px
}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}
.按钮容器{
高度：3em；
宽度：100%；
背景色：#ffffff；
}

工程硕士
函数openNav（）{
document.getElementById（“myNav”）.style.width=“100%”；
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0%”；
}
☰打开
☰打开
❮
❯
var-myIndex=0；
var myTimer=设置间隔（旋转木马，3500）；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
}
我的计时器//每3.5秒更改一次图像
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i
多布斯渡口，纽约10522

（914）479-6400

在

中。叠加

样式设置使用

位置：固定

而不是

位置：相对