How to give priority to a div in terms of overlapping divs on a drop down menu?


Tags: html,css,drop-down-menu

Problem :

I added a new navigation menu to my website. It's one I found from a tutorial and I am having an issue with it. It appears to be hiding behind the div directly below it. I have tried z index but that does not work in this case. I am using z index though. I have the div above the nav menu fixed so that it moves with the page when I scroll.

This fiddle is of most of the site. there is a lot of code but I do not know where the issue is so I added most of it. The last bit of css is for the datatables.

The following code is the div containing the nav menu (not sure if that's relevant.)

.box{
    margin-left:auto;
    margin-right:auto;
    width:1000px;
    position:relative;
    margin-top:220px;
    z-index:1;

}

So basically how can I make it so that the nav menu does not hide behind the bottom div. the content which is the datatables.

As always thanks in advance!

EDIT: I removed overflow:hidden from the .box and now it shows me the menu but it pushes all the divs and content below it down when the menu drops down. Anyway to fix this?



Solution :

Here is your solution. Adjust to whatever you need it to be. http://jsfiddle.net/cornelas/eNp8F/16/

.box{
margin-left:auto;
margin-right:auto;
width:1000px;
position:relative;
margin-top:220px;
z-index:999;
height: 400px;

}

#content {
/* Background color, gradients & Rounded Corners */

background-color: #121212;
border: 1px solid #343434;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px ;
-webkit-box-shadow:  1px 4px 15px 1px rgba(0, 0, 0, 9);
box-shadow:  1px 4px 15px 1px rgba(0, 0, 0, 9);

-webkit-box-shadow:  1px 4px 15px 1px rgba(0, 0, 0, 9);
box-shadow:  1px 4px 15px 1px rgba(0, 0, 0, 9);

margin:20px;
padding:5px 5px 5px 5px;
position: absolute;
top: 20em;

}


    CSS Howto..

    How can I get a CSS/jQuery animated menu similar to ajusto.com?

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    How can I refresh CSS caching?

    How to override some CSS class settings

    How to center CSS-shapes within a wrapper in a row

    How to get a css property of an externally styled element with javascript

    How to workaround: IE6 does not support CSS “attribute” selectors

    How to create a table using multiple span in one div using CSS

    In html, how is a child element's percentage-based size calculated when its parent has padding?

    How to align logo and text in bootstrap on small screens?

    css how to make H2 tag look same as H3 tag (turned out hard!)

    How do you add PHP to CSS?

    How to add css class?

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    How to use custom CSS to change the distance between the header and top of the page/where the page starts? [closed]

    How to run/debug Web Application project without cache/cookies?

    How can I align my form to the center of the background? CSS

    How can I center just one element within a container?

    How to Make a Picture rotate Continuously? [closed]

    How to invert the pentagon created using CSS?

    How do I put a border around a tr tag?

    How to detect which button is clicked in javascript?

    How to write css for a color when you only know the color in the RGB format [duplicate]

    How to correctly style drop-down menu

    how to select last-child or first-child elements just in parent? (css - html)

    Show div on hover span styling

    How do I move this scrolling bar closer to the post area?

    How to create button backgrounds with css

    How to CSS style a table such that its width is within [min, max] percent of page width and as wide as necessary?

    How to center navigation that has icons so text is aligned to icons?