Solved

Drop Down Menu not staying on Top/in front

Posted on 2011-03-18
10
229 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

623 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