Jason Jason - 5 months ago 13
HTML Question

stopping dropdown navigation bar from pushing elements aside

I have a dropdown navigation bar, and when elements like buttons or images are too high up on the page, the navigation bar pushes the elements to the right side when drop-down options appear. How do I stop this?

Navbar:

<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 functions for dropdown:

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";
}


If you are wondering why I took such a difficult route for making the navigation bar, it's because I have to use JavaScript.

Here is JS fiddle example: http://jsfiddle.net/fNPvf/10015/

The window is small in the fiddle, and the effect is slightly different, but notice how when you hover over "Data Validation" the dropdown menu pushes the text/image/body downwards?

Answer

You need absolute positioning and a higher z-index for either the containing <div> or the <ul> itself. Just add this to your code and adjust the z-index as needed:

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

See working demo here

Comments