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!