• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

Drop Down Menu not staying on Top/in front

I have a pure CSS drop down menu that keeps moving the other content to its right when it drops down the menu.  

I am going to provide the CSS, an image of the output from firebug, and an image of an example of what is happening.  HTML Structure from Firebug Example of problem
/* Common styles */

/* menu bar start here
#navbar {
    background-color: #d90000;
    /*position: relative;
    */
    min-height:29px;
    z-index: 100;
}

#breadcrumbs {

}

#leftSideBar {

}

#mainContent {
	/*display: absolute;
	   */
	position: relative;
   z-index: 10;

}

#rightSideBar {
	display: inline;
}

#footer {

}
#navbar ul, ul li, ul li ul {
    margin: 0; 
    padding: 0;  
    list-style:none;
    background-color: #d90000;
    border-right:1px solid #999;
	border-left:1px solid #FFF;
	border-top:1px solid #FFF;
    z-index: 100
}


#navbar ul li {
	float:left;
	/*postion:relative;
	*/
	display:block;
    z-index: 100
}

/* The dropdown list. This is set to 200px wide */
#navbar ul li ul {
	
	postion:absolute;
	display:none;
	with:200px;
	top:25px;
	left:0;
	z-index: 100;
}

/* Override the styles above since we want
the dropdown to behave as a list */
#navbar ul li ul li
{
   position:relative;
   float:none;
   display:block;
	    z-index: 100
}

/*stagger the menus so they appear out of the way of the parent menu. 
In this case, we’re moving it 200px to the left.*/
#navbar ul li ul li ul
{
   left:0px;
   top:25px;
	    z-index: 100
}

/*We want to make sure that a menu deploys only when the 
cursor is over the parent item.  But we don’t want all of 
the sub menus within that item to show up.
Open the sub menu on mouseover*/
#navbar ul li:hover ul, ul li ul:hover
{
   display:block;
	    z-index: 100
}

/*Now we style the links inside the lists…*/
#navbar ul li a
{
   padding:5px 10px 7px 10px;
   display:block;
   color:#ccc;
   min-width:60px;
   text-align:center;
   text-decoration:none;
	    z-index: 100
}

#navbar ul li ul li a
{
   padding:5px 10px;
   text-align:left;
	    z-index: 100
}

#navbar ul li a:hover
{
   color:#333;
   background:#dde;
	    z-index: 100
}*/
/* End of style for menu bar*/


body*/{background:#f0fff0;font:12px verdana,helvetica,arial,clean,sans-serif;*font-size:small;*font:x-small;}

a {
 	color 	: #0000ff;
 	text-decoration: underline;
}
a:VISITED {
 	color 		: #0000ff;
 	text-decoration: underline;
}
a:HOVER {
 	color 		: #00bfff;
 	text-decoration: underline;
}
ul {
    list-style-type: none;
	border: none;
	margin: 0;
	padding: 5px;
}

li {
	margin: 0 0 3px 0;
	padding: 2px;
}
.bold {
	font-weight: bold;
}
h1, h2, h3, h4 {
	margin-top: 10px;
	color: #000;
}
h3 {
	font-size: 120%;
	color: #999;
}
h3 a {
 	color 	: #009900;
 	text-decoration: none;
}
h3 a:VISITED {
 	color 		: #009900;
 	text-decoration: none;
}
h3 a:HOVER {
 	color 		: #00cc33;
 	text-decoration: underline;
}
/* Layout - Common */

#content-page {
	width: 100%;
	margin: auto;
}

#content-body {
	width: 100%;
}

#header {
	background: url('/images/bg-body.gif');
	border-bottom: solid #999 1px;
	padding: 10px;
	margin: 0 0 10px 0;
}
#footer {
	border-top: solid #999 1px;
	padding: 5px;
}

.clear {
	clear: both;
}

/* WIKI styles */
#wiki-content-main {
	
	margin: 0 5px 10px 185px;
	padding: 10px;
	border: solid #999 1px;
	background: #f5f5f5;
}

#wiki-content-left {
	float: left;
	width: 180px;
	margin: 0;
	padding: 0;
	
}

#wiki-top-menu {
	float: left;
	margin:  10px 0 -1px 200px;
	padding: 1px;
}

#wiki-top-menu a {
	border: solid #999 1px;
	padding: 3px 3px -1px 3px;
	margin: 2px;
	text-decoration: none;
	background: #fff;
}

#wiki-top-menu a:VISITED {
	text-decoration: none;
}
#wiki-top-menu a:HOVER {
	color: #ff0000;
	text-decoration: none;
}

.wiki-top-menu-active a {
	border: solid #999 1px;
	border-bottom: solid #fff 1px;
	paddding: 3px;
	text-decoration: none;
	background: #fff;
}
.wiki-top-menu-active a:VISITED {
	text-decoration: none;
	background: #fff;
}
.wiki-top-menu-active a:HOVER {
	color: #ff0000;
	text-decoration: none;
	background: #fff;
}

#wiki-left-menu {
	
	width: 160px;
	margin: 0 0 10px 5px;
	padding: 3px;
	border: solid #999 1px;
	background: #fff;
}

#wiki-search-box {
	width: 160px;
	margin: 0 0 10px 5px;
	padding: 3px;
	border: solid #999 1px;
	background: #fff;
	text-align: center;
}

.page-title {
	font-size: 120%;
	fint-weight: bold;
}
#edit-article {
	width: 90%;
	height: 200px;
	background: #fff;
}
#login-form {
	width		: 200px;
	padding		: 10px;
	margin		: 100px auto;
	background 	: #fff;
	color		: #696969;
	border		: solid #ccc 1px;
	font-weight	: bold;

}

.input {
    font-family: Verdana;
    font-size: 12px;
}

.item {
	margin: 10px 0px;
}
.error {
	color: #ff0000;
}
.small {
    font-family: Verdana;
    font-weight: bold;
    font-size: 10px;
}
.header2 {
    font-family: Verdana;
    font-weight: bold;
    font-size: 120%;
}

.header1 {
    font-family: Verdana;
    font-weight: bold;
    font-size: 140%;
}
.help {
	margin: 0 0 10px 0;
	padding: 5px;
	border: dotted #ccc 1px;
	background: #fff;
}
#captcha-label {
	clear: both;
}

Open in new window

0
MTTDev
Asked:
MTTDev
  • 6
  • 4
1 Solution
 
meb_santosoCommented:
z-index only works if position is defined.
if you commented out (disabled) the position, the z-index is overruled, thus you'll get what you get now.
0
 
meb_santosoCommented:
I'm talking about the following :

#navbar {
    background-color: #d90000;
   /*position: relative;
    */

    min-height:29px;
    z-index: 100;
}
0
 
MTTDevAuthor Commented:
I removed the comments and am still getting the same result.

Do I need the position:relative in all the #navbar class code blocks?

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
meb_santosoCommented:
no, doing so might just ruin everything.

try this

/* menu bar start here
#navbar {
    background-color: #d90000;
    position: fixed; 
    min-height:29px;
    z-index: 100;
}

#navbar ul, ul li, ul li ul {
    margin: 0; 
    padding: 0;  
    list-style:none;
    background-color: #d90000;
    border-right:1px solid #999;
	border-left:1px solid #FFF;
	border-top:1px solid #FFF;
    z-index: 100
    position: relative; 
}


#navbar ul li {
	float:left;
	position:relative;
	display:block;
    z-index: 100
}

/* The dropdown list. This is set to 200px wide */
#navbar ul li ul {
	
	postion:absolute;
	display:none;
	with:200px;
	top:25px;
	left:0;
	z-index: 100;
}

/* Override the styles above since we want
the dropdown to behave as a list */
#navbar ul li ul li
{
   position:relative;
   float:none;
   display:block;
}

/*stagger the menus so they appear out of the way of the parent menu. 
In this case, we’re moving it 200px to the left.*/
#navbar ul li ul li ul
{
   left:0px;
   top:25px;
}

/*We want to make sure that a menu deploys only when the 
cursor is over the parent item.  But we don’t want all of 
the sub menus within that item to show up.
Open the sub menu on mouseover*/
#navbar ul li:hover ul, ul li ul:hover
{
   display:block;
}

/*Now we style the links inside the lists…*/
#navbar ul li a
{
   padding:5px 10px 7px 10px;
   display:block;
   color:#ccc;
   min-width:60px;
   text-align:center;
   text-decoration:none;
}

#navbar ul li ul li a
{
   padding:5px 10px;
   text-align:left;
}

#navbar ul li a:hover
{
   color:#333;
   background:#dde;

}

Open in new window

0
 
MTTDevAuthor Commented:
I tried my question and it didn't solve the problem but added an additional one.  

meb_santoso I'll try your code.
0
 
MTTDevAuthor Commented:
meb_santoso, I added your code and it turn it into a vertical menu with bullets and pushed the content section down.

Using the image of the output above to get a horizontal menu bar that will drop down on top of all the other content what would you do?  I am not a designer as you can tell.

I'm at my wits end with this.  This should be so obvious, but I'm missing it.  Every site does this.  Why won't this?
0
 
meb_santosoCommented:
i would recommend you the following: http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/#

delete everything, start over.
it will cut down your time to troubleshoot everytrhing.
0
 
MTTDevAuthor Commented:
I'll check that out.  Thx.
0
 
MTTDevAuthor Commented:
Problem solved.  Although I'm sure a designer would make changes, it will do for now.  There were many changes that went into the solution and I don't have the time to list them all and it was two weeks ago.  Thanks for the effort and help.
0
 
MTTDevAuthor Commented:
My own solution
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now