samsoner3

One more line of code:

When I deleted this line of code, the rollover didn’t work in Mozilla as well.

#navmenu li:hover > a,
#navmenu ul ul :hover > a {
	color:#fff;
	background:#333;
}
#navmenu ul li:hover > ul {
	display:block;
}

After working on this more, this is what I’ve learned:

#navmenu ul ul { display:block; position: absolute; z-index: 999; top: 38px; left: 0px; margin-right: 0;
}

If display:block; then my sub-menu appears in both browsers. However when I change display:none; the sub-menu is hidden until I rollover the “About” link because the menu is positioned directly beneath the “About” link.

This works ONLY in Mozilla. I don’t understand why it doesn’t work in IE8

Also, here’s the CSS I used for the menu:

#navmenu {
	width: 900px;
	display:block;
	float: right;
	background: red;
}

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; background: red;}

#navmenu li {display: inline; background: red;}

#navmenu a {display: block; text-decoration:none; color: black; background: red; padding: 0 10px; line-height: 38px;}

#navmenu a:hover {color: #ffffff; background: black;}

#navmenu ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
}
#navmenu ul ul li {
	min-width: 150px;
}
#navmenu ul ul ul {
	left:100%;
	top:0;
}
#navmenu ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 150px;
	float: left;
	margin-left: 0;
}
#navmenu li:hover > a,
#navmenu ul ul :hover > a {
	color:#fff;
	background:#333;
}
#navmenu ul li:hover > ul {
	display:block;
}

This is not a theme from the WordPress website.

I am creating my own theme from scratch, on my desktop. I want to upload it to my server.

The theme is not finished yet, but I want to see what I’ve done so far.