Javascript 停止下拉导航栏将元素推到一边

我有一个下拉导航栏，当按钮或图像等元素在页面上的位置过高时，当出现下拉选项时，导航栏会将这些元素推到右侧。我该怎么阻止这一切

导航栏：

<nav id="nav1">

<ul>

<li><a href="#" onmousedown="Sound.play()">Home</a></li>

<li onmouseover = "DropDown1()" onmouseout="DropUp1()"><a href="#" onmousedown="Sound.play()">Images</a><ul   class="DropUp" id="Droplist1" >
<li class="DropDown"><a id="Droplist1" href="#">Test1</a></li>
<li class="DropDown"><a href="#">Test2</a></li>
<li class="DropDown"><a href="#">Test3</a></li></ul>
</li>

<li onmouseover = "DropDown2()" onmouseout="DropUp2()"><a href="#" onmousedown="Sound.play()">Adverts</a><ul id="Droplist2"  class="DropUp">

<li class="DropDown"><a  href="#">Test1</a></li>
<li class="DropDown"><a  href="#">Test2</a></li></ul>
</li>


<li><a href="#" onmousedown="Sound.play()">Data Validation</a></li>

<li><a href="#" onmousedown="Sound.play()">Security</a></li>

</ul>
</nav>

用于下拉列表的JavaScript函数：

function DropDown2() {
var t = document.getElementById("Droplist2");
t.className = "DropDown";
}
function DropDown1() {
var t = document.getElementById("Droplist1");
t.className = "DropDown";
}

function DropUp2() {
var t = document.getElementById("Droplist2");
t.className = "DropUp";
}

function DropUp1() {
var t = document.getElementById("Droplist1");
t.className = "DropUp";
}

如果你想知道为什么我在制作导航栏时走了这么难的路，那是因为我必须使用JavaScript

以下是JS fiddle示例：

---

窗口在小提琴中很小，效果略有不同，但请注意，当您将鼠标悬停在“数据验证”上时下拉菜单向下推动文本/图像/正文？

您需要绝对定位和更高的z索引，用于包含

或

本身。只需将其添加到代码中，并根据需要调整

z-index

：

nav#nav1 ul{ 
    position: absolute;
    top: 0;
    z-index: 9;
}

---

创建一个小提琴来显示问题。

nav#nav1 ul{ 
    position: absolute;
    top: 0;
    z-index: 9;
}