Solved

Drop Down Menu not staying on Top/in front

Posted on 2011-03-18
10
224 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript/CSS: Detect if hue-rotate supported by browser 1 35
Error on link 14 46
CSS z-index issue 3 31
Add image to into animation on website template 1 27
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

776 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