How to get a drop-down menu to overlay other elements

Question

I am creating a little website and I can't get the drop-down menu, which comes out of the "gallery" button when I hover on it, to overlay the paragraph below the menu instead of pushing the whole content down. I've already tried every combination of position: relative; z-index: 9999;. However, when I set position: absolute; for the <ul> element it actually works, but messes up all the layout of <ul> items. Please help me to get this done because I'm starting to bump my head... Here's my code. You can see how the paragraph goes down when you hover on the "gallery" button. I wish the paragaph stayed where it is and the drop-down menu overlayed it.

score 15 · Accepted Answer · answered Apr 19 '15 at 16:32

15

First position the parent element as relative to make it establish a new containing block for absolutely positioned descendants:

.menu-item {
    width: 33.33%;
    float: left;
    position: relative; /* <-- added declaration */
}

Then, position the nested <ul> absolutely, add top, left offsets as well as width:

Example Here

.menu-item ul {
    margin-top: 5px;
    list-style-type: none;
    height: 0px;
    overflow: hidden;

    position: absolute;  /* <-- added declarations */
    left: 0; top: 100%;  /*     here               */
    width: 100%;         /*     and here...        */

    transition: height 1s ease;
}

answered Apr 19 '15 at 16:32

Hashem Qolami

97,268
26
150
164

1

Well that's a piece of a miracle! You saved hours of my time! Thank you! All that I needed was that `left: 0; top: 100%; width: 100%;` properties! Thank you again!!! – Salivan Apr 19 '15 at 16:36
Could you please also tell me why the `top: 100%` property makes the `
– Salivan Apr 19 '15 at 16:49
@Salivan Of course. for absolutely positioned elements — whose their position value is `absolute` or `fixed` — [`top` property](https://developer.mozilla.org/en-US/docs/Web/CSS/top) specifies the distance between top margin of the element and top margin of the element's containing block. Also a percentage value on `top` is relative to the `height` of the containing block. Therefore by setting `top` to `100%` we can make sure that the element will be positioned under the containing block. – Hashem Qolami Apr 19 '15 at 16:54
If I understood it correctly, by setting the `top` property to 100% we force the gap between the element and its container to be as big as possible, because 100% means the gap should be the full height of the container. Right? – Salivan Apr 19 '15 at 17:00
Thank you very much! I appreciate people that don't refuse to pay a couple of seconds of their time for others. – Salivan Apr 19 '15 at 17:03
@Salivan Don't mention it. I'm glad that I could help. – Hashem Qolami Apr 19 '15 at 17:04

score 4 · Answer 2 · answered Apr 19 '15 at 16:28

4

You need to set your .menu-item a relative position

position: relative;

and now you can set your ul to absolute position without messing up your layout.

Here's an updated version of your fiddle

answered Apr 19 '15 at 16:28

slashsharp

2,823
2
19
26

But I can clearly see a messed up layout. Are you sure about your solution? – Salivan Apr 19 '15 at 16:30
I'm not sure what do you mean, the layout is still the same except for the `ul`. You need to style it. – slashsharp Apr 19 '15 at 16:32
Yes, I mean that the layout of `
– Salivan Apr 19 '15 at 16:38
Yeah, and that was what did the whole trick. I would have been trying to style it for ages, because this is my second day working with CSS, but he just showed me the simplest and clearest way. – Salivan Apr 19 '15 at 16:40

score 0 · Answer 3 · edited Oct 20 '15 at 19:16

0

This does not work on frame builds..

Example: you have two frames top with content in them and you have got a CSS dropdown menu on the top frame. When you come on the menu, the sub menu is not seen in front of the content page.

edited Oct 20 '15 at 19:16

AGE

3,752
3
38
60

answered Oct 20 '15 at 18:41

Salih

11

How to get a drop-down menu to overlay other elements

3 Answers3

Linked