CSS: Drop-Down Not Displaying Properly

[shadowspyre86]

Hello there!

Currently, I am utilizing a vertical drop-down menu webpage, and am having a bit of trouble with IE; when I hover over the main menu, the drop-down suddenly disappears.

Any help is appreciated!

CSS is as follows:

body {
background-color: #9999EE;
}

#container {
		width: 48em;
		margin: auto;
	}

pre {
font-family: arial;
font-size: 12px;
color: #FFFFFF;
}
	
	#header {
		height: 150px;
		background-color: #6666FF;
		padding: 0px;
		margin: 0px;
	}
	
		.menuContainer {
			background: #eee;
			float: left;
			padding: 0;
			margin: 0;
		}

		.menuContainer ul {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 12em;
			height: 100%;
			float: left;
		}
		
		.menuContainer a {
			font: bold 11px/16px arial, helvetica, sans-serif;
			display: block;
			border-width: 2px;
			border-style: solid;
			border-color: #DDDDDD;
			margin: 0;
			padding: 1px;
		}
		
		.menuContainer h2 {
			display: block;
			margin: 0;
			padding: 0;
		}
		
		.menuContainer h2 a {
			color: #fff;
			background: #553377;
			text-transform: uppercase;
			text-decoration: none;
		}
		
		.menuContainer h2 a:hover {
			color: #fff;
			background: #774499;
			text-transformation: uppercase;
			text-decoration: none;
		}
		
		.menuContainer a {
			color: #fff;
			background: #005588;
			text-decoration: none;
		}
		
		.menuContainer a:hover {
			color: #fff;
			background: #0088BB;
		}
		
		.menuContainer li {
			position: relative;
		}
		
		.menuContainer ul ul ul {
			position: absolute;
			top: 0;
			left: 100%;
		}
		
		.menuContainer ul ul {
			position: absolute;
			z-index: 500;
		}
		
		#content {
			min-height: 185px;
			font-family: arial;
			font-size: 12px;
			color: #FFFFFF;
			background-color: #AAAAFF;
		}
		
		#content div {
			margin-bottom: -0px;
			padding-bottom: 0px;
		}
		
		.format {
			padding-top: 30px;
			padding-left: 50px;
			padding-bottom: 0px;
		}
		
		#footer {
			background-color: #445544;
			font-family: arial;
			font-size: 12px;
			color: #FFFFFF;
			height: 50px;
			padding-top: 1px;
		}
		
.menuContainer ul ul,
.menuContainer ul li ul ul,
.menuContainer ul ul li ul ul
{display: none;}

.menuContainer ul:hover li ul,
.menuContainer ul ul:hover
{display: block;}

HTML Code is as follows:

<div id="container">
	<div id="header"></div>
	<div id="content">
		<div id="menuContainer">
			<ul id="verticalmenu" class="menu">
				<li><a href="javascript:changePage('home')">Home</a></li>
				<li><a href="javascript:changePage()" >About</a>
    				<ul id="submenu1">
						<li><a href="javascript:changePage('history')">History</a></li>
    					<li><a href="javascript:changePage('employees')">Employees</a></li>
    					<li><a href="javascript:changePage('employment')">Employment Opportunities</a></li>
    				</ul>
				</li>
				<li><a href="javascript:changePage('products')">Products</a></li>
				<li><a href="javascript:changePage('links')">Links</a></li>
			</ul>
		</div>

[ralph.m]

Sounds like the menu is disappearing behind the content below it. This is usually a z-index issue. Try this:

.menuContainer {
  z-index: 20;
}

[RyanReese]

Again, (if this is the case) you forgot the position:relative; on it Ralph.

Also, you have the logic wrong OP, normally on hover of an <li> you show the submenu ul..not ul:hover

[shadowspyre86]

Again, (if this is the case) you forgot the position:relative; on it Ralph.

Also, you have the logic wrong OP, normally on hover of an <li> you show the submenu ul..not ul:hover

I tried Position:Relative, but when i do, it creates a big white box. I'll go more indeph later.

[RyanReese]

If you put it online it will make it much easier for us to debug since we have firebug (and not to brag, but I debug everything on that)

[shadowspyre86]

If you put it online it will make it much easier for us to debug since we have firebug (and not to brag, but I debug everything on that)

Sure.

Here's the address:

kelleykreativesonline.com/examples/dropdownmenu/

Also, I'm doing the testing in IE7.