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.

Answer 1

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

Answer 2

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