Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Drop Down Menu not staying on Top/in front

Posted on 2011-03-18
10
Medium Priority
?
231 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

670 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