How to Make a Div Go Behind a CSS Drop-Down
Many websites use drop-down style menus to place lots of navigational options in one small portion of the page. This code is often complex and involves use of the “z-index” property in CSS to make parts of the menu stack in a certain order and keep the drop-down above other page content. Sometimes you will have a part of the page that does not go behind the menu as it should. Fixing this involves making sure the drop-down contains a proper z-index and giving the problematic content a negative z-index if necessary.
Other People Are Reading
Instructions
-
-
1
Open the style sheet that contains styles for the CSS drop-down. Sometimes the styles are located in a style sheet just for the drop-down, especially if you installed it as part of a script. Other times, the styles are in the main style sheet. Find out what style sheets you have by looking at the head of your HTML:
<head>
<title>Title of Your Page</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” />
<link rel=”stylesheet” href=”dropdown.css” type=”text/css” />
</head>In this example, there is a “dropdown.css” file that likely contains the drop-down's CSS code. Other possible names include “menu” or “suckerfish,” the latter being an alternative name for drop-downs.
-
2
Find the drop-down's CSS code in the style sheet. You need the main rule:
#menu {
list-style: none;
padding-left: 0;
}Sometimes developers add comments like “/* navigation bar code */” to make it clear which code does what. If you do not see comments, open the HTML file for your Web page and get the ID or class name of the “<ul>” tags that make the menu.
-
-
3
Add relative positioning and a z-index to the menu:
#menu {
list-style: none;
padding-left: 0;
position: relative;
z-index: 100;
}The z-index needs a high-enough value so that it stacks the menu bar above all other page content. The value can be as high as “9999.” Positioning is necessary for a z-index to work, but a relative position will not move the bar someplace else on the page.
-
4
Test the page in a browser. If the problem persists, right-click on the browser and view source code. Find the tags containing the problematic content:
<div id=”some_content”>
Content that needs pushing down...
</div>Get the ID name from the content's tags, such as “some_content” in the previous example.
-
5
Go back to the style sheet and add this to the bottom:
#some_content {
position: relative;
z-index: -10;
}A negative z-index will push the content below any other content that has a positive z-index value. With the menu bar containing a high value and the problem area being z-indexed with a negative value, the problem area should go behind the menu.
-
1
Resources
More Like This
Comments
-
thnxxxxx a really appreciate your job you really helped me
