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

标签 javascript html css navigationbar

我有一个下拉导航栏,当按钮或图像等元素在页面上的位置过高时,导航栏会在出现下拉选项时将元素推到右侧。我该如何阻止它?

导航栏:

<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>

CSS:

nav#nav1 li a {
    display: block;
    padding: 3px 8px;
    background-color: #5e8ce9;
    color: #fff;
    text-decoration: none; 
}
nav#nav1 li {
    list-style: none;
float: left;}

.DrowDown {
         display: block;
    position: absolute;
    margin: 0;
    padding: 0;
float: none;
}
nav#nav1 li:hover li {
    float: none; }

nav#nav1 li:hover li a {
    background-color: #69f;
    border-bottom: 1px solid #fff;
    color: #000; }
#navbar li li a:hover {
    background-color: #8db3ff; }

nav#nav1  ul li a:hover { background: #686868 ; }
nav#nav1  ul li a:active { background: #F0F0F0; }

下拉列表的 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 示例:http://jsfiddle.net/fNPvf/10015/

fiddle 中的窗口很小,效果略有不同,但请注意,当您将鼠标悬停在“数据验证”上时,下拉菜单如何将文本/图像/正文向下推?

最佳答案

您需要绝对定位 和更高的z-index 来包含<div><ul>本身。只需将其添加到您的代码中并调整 z-index根据需要:

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

See working demo here

关于javascript - 停止下拉导航栏将元素推到一边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27359720/

相关文章:

javascript - 我可以使用 jQuery 为代码中的所有链接编写 e.preventDefault() 吗?

循环运行不够快的 JavaScript 函数

html - 我可以禁用 HTML 中的地址链接吗?

php - Wordpress 首页底部的大量空白

javascript - float 是否可以只设置 x 轴的起点?

javascript - 跨网络应用程序和 Chrome 扩展程序共享本地存储对象

javascript - 如果 JS 函数包含在 HTML 中,我如何在浏览器控制台中显示所有 JS 函数?

javascript - 使一个事件发生多次

css - CSS 中的 iPad 特定代码

html - 如何在不使用 ID 首选项的情况下更改链接的颜色?