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 ins

Answer 1

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.

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

Answer 3

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