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 to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to use box shadow in css?

    How Do I Use Css To Select A Area Of Code

    How can I target CSS to a particular sharepoint Page Layout file?

    How put an element more close to a html label

    How to center banner with jquery mobile?

    how to set css for html page opened by 'appAPI.openURL' in crossrider

    How to run a different html file when device width changes?

    How to display block from left to right in css

    How to center body on a page?

    CSS Syntax - How to interpret this?

    How is a CSS “display: table-column” supposed to work?

    how to position divs within another div

    How to get correct overflow for proper div with fixed footer?

    How can i Convert left vertical menu to right?

    How to Create Responsive Web Page With Static Header?

    How to add css class?

    How can I stretch an empty floating div to the full height available using css?

    how to “replace” css Properties with jQuery

    HTML DIV Overflowing, How To Stop?

    How to set CSS3 ::selection using Javascript

    how to make smooth css transition

    How to convert columns to rows using CSS

    How to dynamically pass variables from HTML to CSS [closed]

    How to apply css animation to angular view when the view is called

    How to remove Firefox's button outline when mouse press, not click, hover or forcus

    How to achieve “background-image: cover” CSS effect for dynamic images?

    Background images: how to fill whole div if image is small and vice versa

    How to make Google Preview Button display in a CSS pop-up?

    Gradient css borders not showing in internet explorer an firefox