Im tring to make a CSS and JS drop down menu. At them moment, my javascript works fine, but ive got a problem with CSS. When the menu is shown, it pushes the other content out of the way.

 

Heres my CSS code so far:

<style type = 'text/css'>
.menucontainer
{
background:#70fe7a;
margin:2px;
width:200px;
z-index:100;
float:left;
}
.menuheader
{
background:#70fe7a;
margin:2px;
width:196px;
}
.menucontent
{
display:none;
padding:2px;
}
.dmlink
{
width:192px;
background:#9affa1;
margin:2px;
cursor:pointer;
}
a.dmlink
{
color:darkgrey;
text-decoration:none;
}
</style>

 

 

And heres the code i use to display the menu:

<div class = 'menucontainer' onmouseover = 'dm("mc2","show")' onmouseout = 'dm("mc2","hide")'>
<div class = 'menuheader'>Catagories again</div>
<div id = 'mc2' class = 'menucontent'>
<div class = 'dmlink'><a class = 'dmlink' href = '#'>Cars and automotive</a></div>
<div class = 'dmlink'><a class = 'dmlink' href = '#'>Computers and the internet</a></div>
<div class = 'dmlink'><a class = 'dmlink' href = '#'>Home and housekeeping</a></div>
<div class = 'dmlink'><a class = 'dmlink' href = '#'>Other</a></div>
<div class = 'dmlink'>Search:<br><input style = 'width:140px;'></div>
</div>
</div>

 

I thought that using z-index would fix it, but is seems to have made no difference.

 

Cheers for your help in advance! :D

z-index only works on absolutely positioned elements. maybe fixed too.

 

The reason the drop down menu pushes the rest of the content down is because it's not taken out of the page flow. To do so you need to absolutely position it.

Is there any other way i could do it without using z-index, or using absolute positioning to place is on the page?

Cheers

Not sure about this, but could you use "display:hidden" instead of "display:none" ? This way it's in the document flow but invisible, so when it appears it doesn't alter the document flow?

Then JS it to be visibility : visible when rolled over?

Not sure about this, but could you use "display:hidden" instead of "display:none" ? This way it's in the document flow but invisible, so when it appears it doesn't alter the document flow?

Then JS it to be visibility : visible when rolled over?

'hidden' is not a keyword for the property 'display'. It's a keyword for the property 'visible'.

 

@Alex, why reason you can't use absolutely positioned menu items? Does it mess up other elements?

 

The only way to make it not push the rest of the content is pull it out of the content flow.

 

Do you got a link to a live sample of what you got?

'hidden' is not a keyword for the property 'display'. It's a keyword for the property 'visible'.

 

Ah yes, sorry long time since I've used that. How about visibility : hidden, then switching to visible with JS?

Thanks for your help, ive positioned it all in one container. I wanted to make it without absolute positioning so that i could easily re-use the code..but seems that this is the only way to do it

 

Cheers

Ah yes, sorry long time since I've used that. How about visibility : hidden, then switching to visible with JS?

Nopes! Afraid not. The element will not be visible, but it's still in the page flow. And the element will still reserve its space in the page flow.

Thanks for your help, ive positioned it all in one container. I wanted to make it without absolute positioning so that i could easily re-use the code..but seems that this is the only way to do it

 

Cheers

You can still make the code reusable even though it's absolutely positioned.

Look here there are some great menus