Hi - I'm a CSS/HTML newbie so bear with me..

I'm using a CSS menu on my webpage {taken from CSS Menu Maker} and it works great in other browsers except IE7. The sub menu items get hidden behind the main menu. I've tried researching solutions but 1) have difficulty understanding some of the suggested fixes and 2) haven't found one that works for me.

Can someone please help?

Here is the CSS

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
	background-color:#534741;
}
.menu{
	left:200px;
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 63% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	text-align:center;
	text-decoration:none;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
	zoom:1;
		}
		.menu li a:hover, .menu li:active, .menu ul li:hover, .menu ul li:active a{
			background: #7C0B0B bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:175px;
		z-index:100;
		}
	.menu li:hover ul, .menu li:active ul{
		display:block;
		}
	.menu li li {
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:175px;
		}
	.menu li:hover li, .menu li:active li a{
		background:none;
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:11px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul a:active, .menu li ul li:hover, .menu li ul li:active a{
			background:#7C0B0B center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}

and the HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../menu_057_04207/menu/menu_style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="wrapper">
	<div id="head">
		<h1><img src="../new_headerv2.jpg" alt="IM Header" width="750" height="125" border="0" align="top" usemap="#myHome">
<map name="myHome" id="myHome"><area shape="rect" coords="18,17,248,110" href="../index.html" alt="In Mulieribus :: Home">
</map></h1>
	</div>
	<div id="spacer"></div>
	<div id="nav"> 
	<!--<style media="all" type="text/css">@import "/menu/menu_style.css";</style>-->
	<div class="menu">
<ul>
<li><a href="">About Us</a>
<ul>
<li><a href="../ensemble.html" target="_self">Ensemble</a></li>
<li><a href="../musicians.html" target="_self">Musicians</a></li>
</ul>
</li>
<li><a href="">Seasons</a>
<ul>
<li><a href="../season.html" target="_self">Current Season</a></li>
<li><a href="../pastSeasons.html" target="_self">Past Seasons</a></li>
</ul>
</li>
<li><a href="">Listen</a>
<ul>
<li><a href="../cds.html" target="_self">CDs</a></li>
<li><a href="../samples.html" target="_self">Samples</a></li>
</ul>
</li>
<li><a href="">Press</a>
<ul>
<li><a href="../reviews.html" target="_self">Reviews</a></li>
<li><a href="../mediakit.html" target="_self">Media Kit</a></li>
</ul>
</li>
<li><a href="">Support Us</a>
<ul>
<li><a href="../donate.html" target="_self">Donate</a></li>
</ul>
</li>
<li><a href="">Contact Us</a>
<ul>
<li><a href="../contact.html" target="_self">Contact Information</a></li>
<li><a href="../email.html" target="_self">Join Our Email List</a></li>
</ul>
</li>
</ul>
</div>
</div>

THANK YOU!

Recommended Answers

All 3 Replies

In the definition for .menu li a, remove the zoom:1.

.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	text-align:center;
	text-decoration:none;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}

Hi - Thanks so much for your suggestions. Unfortunately, it didn't solve the issue. Any other ideas?

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.