Vertical submenu moves content

HTML & CSS
1

I have a CSS menu that almost works. It has 2 submenus and is on the left side; content is on the right side. First 3/4 of navigation with submenus works fine, lower 1/4 when you go to submenu it pushes the content on the right to beneath the left navigation.

I’ve checked the code over and over and can’t see what was done differently. Would someone mind taking a look? Fresh eyes always helps. The problem does not occur in Firefox, only in IE 6, 7, 8, go figure.:confused:

Hopefully I put the following code in correctly.

 body {
   padding: 0; 
   margin: 0;
	background-image:url(images/bg_tile.jpg);
   background-repeat:repeat;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper {
 margin: 0 auto;
 width: 922px;
}
#midwrap {
 background-image:url(images/left_panel.jpg);
 background-color:#FFFFFF;
 margin-bottom: 5px;
 overflow: auto; 
 width: 100%
}
#header {
 color: #333;
 width: 902px;
 padding: 10px;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background-image: url(images/sheriffheader.jpg);
 background-repeat:no-repeat;
}

/* columns */
#leftcolumn { 
 float: left;
/* display: inline;*/
 color: #000000;
 margin: 10px;
 padding: 0px;
 width: 200px;
 z-index:10;
}

#rightcolumn {
	float: right;
	color: #333;
	margin: 5px;
	padding: 0px;
	width: 680px;
	/* display: inline;
 position: relative;*/
	left: 380px;
	top: 185px;
 }

/*CSS Horizontal Nav Bar */

#navbar2 {
 height: 40px;
 width: 100%;
 border-top: solid #000 1px;
 border-bottom: solid #000 1px;
 background-color:#525252;
}

#navbar2 ul {
 margin: 0px;
 padding: 10px;
 font-family:Verdana, Arial, Helvetica,sans-serif;
 font-size:medium;
 color: #FFF;
 line-height: 30px;
 white-space: nowrap;
}

#navbar2 li {
 list-style-type:none;
 display: inline;
}

#navbar2 li a {
 text-decoration: none;
 padding: 7px 5px;
 color: #FFF;
}

#navbar2 li a:link {
 color: #FFF;
}

#navbar2 li a:visited {
 color: #CCC;
}

#navbar2 li a:hover {
 color: #fff;
 background-color:#000;}

a:link {color:#000;}
a:visited {color:#030;}
a:hover {color:#000;}
a:active {color: #960;}

/*  left navigation */

#leftnav a:link {color:#000;}
#leftnav a:visited {color:#030;}
#leftnav a:hover {color:#000;}
#leftnav a:active {color: #960;}
#leftnav ul ul a:link{color:#FFF;}
#leftnav ul ul a:visited {color:#FFF;}

#leftnav {
 width:180px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:small;
 }	

#leftnav ul {
 margin: 0px;
 padding: 0px;
 background-color:#C29C4E; 
}

#leftnav ul li {
 height:25px;
 line-height:25px;
 list-style-type: none;
 padding-left:5px;
 color:#ffffff;
 border-top: solid #4B3C29;
 border-bottom:#4B3C29 solid;
 border-width:1px;
 
}

#leftnav ul li:hover {
   background-color:#CBB163;
	position:relative;
	color:#ffffff;
}

#leftnav ul ul {
	display:none;
	position:absolute;
	left:140px;
	top:5px;
	border:#000 solid;
	border-width:1px;
	background-color:#525252;
	color:#FFF;
}
#leftnav ul li:hover ul {
	display:block;
	color:#FFF;
}

#leftnav ul ul li {
	border: #000 solid;
	border-width:1px;
	width:190px;
	float:left;
	display:inline;
	color:#FFF;
}

#leftnav ul ul ul li {   /*  added this  */
	display:none;
    /*change 3rd tier menu look here */
}

#leftnav ul ul li:hover {
	text-decoration:none;
	border:#000 solid;
	border-width:1px;
	color:#FFF;
}

#leftnav li:hover ul li ul {

    /*display: none;     removed this (this line can be deleted all together) */

	position:absolute; left:180px; top:-1px; z-index:999;
	color:#FFF;
}

#leftnav ul ul li ul{
	left:190px;
	background-color:#614929;
	color:#FFF;
}

#leftnav ul li:hover ul li:hover ul li {   /*  added this  */
	display:block;
	color:#FFF;
}


/*footer*/

#footer { 
 width: 902px;
 clear: both;
 color:#ffffff;
 background: #666666;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

#footerbar {
	height:80px;
	width: 100%;
	border-top: solid #000 1px;
 	border-bottom: solid #000 1px;
	background-color:#666666;
	text-align:center;
}

#footerbar ul {
 margin: 0px;
 padding: 0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:small;
 color: #FFF;
 line-height: 30px;
 white-space: nowrap;
}


#footerbar li {
 list-style-type: none;
 display: inline;
}

#footerbar li a {
 text-decoration: none;
 padding: 7px 10px;
 color: #FFF;
}

#footerbar li a:link {
 color: #FFF;
}

#footerbar2 li a:visited {
 color:#000;
}

#footerbar li a:hover {
 color: #FFF;
 background-color:#000;
}

.clear { clear: both; background: none; }

/* images */

img.dale {
	float:right;
	margin:10px;
	padding: 20px;
	clear:right;
}

img.brownbullet {
	float:left;
	margin:5px;
	padding: 2px;
	clear:right;
}

/* Fonts */

h1 {
	color:#FFF;
	}
h1.patch {
	color:#ffffff;
	margin: 20px;
	padding:20px;
	}

h2 {
	color:#006600;
	}

h3 {
	color:#996600;
	}

it is up on a test site at: inharmonygraphics.inharmonydesigns.com

I’m not sure if I missed something in the lower coding or if I need an IE hack.

Thanks for looking!

Gizelle

2

Thank you for your help Stamme Poes! Not only did it work, I also thank you for the explanation of positioning and z-index. I will have to go back and study that area some more.

I also added arrows on the sections that have submenus.

I appreciate the help very much.

Gizelle

3

Hi,

The problem does not occur in Firefox, only in IE 6, 7, 8, go figure.

I’ve got it happening in Firefox on Ubuntu. Employment and Special Units indeed cause a drop in the main content. I hope tomorrow to get around to looking more closely at it, as you are using absolute positioning so those submenus shouldn’t be able to affect the rest of the page at all.

BTW it would be helpful, user-wise, to put some sort of marking on the items who have sub menus. It seemed a bit hide-and-seek as I hovered around.

I noticed you have the right side floated and position: relative. Must that?
You could leave it unfloated and give it the left margin necessary. So long as you keep the width on it (keeping Haslayout), IE should still show the same as other browsers.
Anyway, the nav menu does not have a position or z-index. There is a possibly-related problem one sees with horizontal dropdowns where a positioned container comes later (position: relative). The subs there get hidden in IE due to a z-index bug.

For now, if you read this before I can get to it tomorrow, try
-unfloating the right side, just keep the width and use the left margin only
-remove position: relative (unless you’re positioning something? You should not need it to keep it where it is)
-set the left nav (or the leftcolumn itself) to position: relative, only to set a ridiculously high z-index. This can get inherited by the subs and should keep them above the right side. Remember only positioned elements can have a manually-stated z-index; otherwise browsers will ignore it.