Solved

Drop Down Menu not staying on Top/in front

Posted on 2011-03-18
10
225 Views
Last Modified: 2012-05-11
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
Comment
Question by:MTTDev
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35167016
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
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35167041
I'm talking about the following :

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

    min-height:29px;
    z-index: 100;
}
0
 

Author Comment

by:MTTDev
ID: 35167131
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Expert Comment

by:meb_santoso
ID: 35167176
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
 

Author Comment

by:MTTDev
ID: 35167237
I tried my question and it didn't solve the problem but added an additional one.  

meb_santoso I'll try your code.
0
 

Author Comment

by:MTTDev
ID: 35167493
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
 
LVL 5

Expert Comment

by:meb_santoso
ID: 35171412
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
 

Author Comment

by:MTTDev
ID: 35181066
I'll check that out.  Thx.
0
 

Accepted Solution

by:
MTTDev earned 0 total points
ID: 35328485
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
 

Author Closing Comment

by:MTTDev
ID: 35360916
My own solution
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question