Menu
I created this drop down menu using only HTML and CSS. It looks fine on IE6 windows. However, the content is pushed to the right when i try to view it on Firefox and Safari. The dropdown menu doesn’t drop down on IE7 either.
Could someone look at it and may be tell me what im missing?
Thanks and i really appreciate it.
Jack.
[code=html]
<html>
<head>
<!–#BeginEditable “doctitle”–>
<title> </title>
<!–#EndEditable –>
<meta name=”Keywords” content=”dropdown Test”>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<script language=”JavaScript”>
<!–
function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}
//–>
</script>
<style type=”text/css”>
<!–
.filetype
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
}
–>
</style>
</head>
<body id=”navigation” >
<div id=”wrapper”>
<div id=”showcase”>
<div id=”info”>
<img src=”newBanner.png” alt=”banner” width=”976″ height=”124″ />
<div class=”menu” >
<ul>
<li><a href=”#”><strong>ABOUT</strong>
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#”>Overview</a></li>
<li><a href=”#”>Missions</a></li>
<li><a href=”#”>History</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><a href=”#”><strong>PROFILE</strong>
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#”>Profile 1</a></li>
<li><a href=”#”>Profile 2</a></li>
<li><a href=”#”>Profile 3</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><a href=”#”><strong>VISITOR INFO</strong>
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#”>General Information for Visitors</a></li>
<li><a href=”#”>DC Location</a></li>
<li><a href=”#”>MD Location</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><a href=”#”><strong>SERVICES </strong>
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#”>Major Services</a></li>
<li><a href=”#”>General Admin</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
</ul>
</div>
<table width=”976″ height=”192″ border=”0″>
<tr>
<td width=”175″ valign=”top” bgcolor=”#CCCCCC”><div align=”center”>
<h3>About the Organization</h3>
</div>
<ul>
<li>
<p><a href=”#”>Overview</a></p>
</li>
<li>
<p><a href=”#”> Missions</a></p>
</li>
<li>
<p><a href=”#”>History </a></p>
</li>
</ul></td>
<td width=”800″ valign=”top”><!– TemplateBeginEditable name=”main” –>
<p> </p>
<p> </p>
<!– TemplateEndEditable –></td>
</tr>
</table></div>
<p> </p>
<p align=”center”><a href=”#”>Back to Home</a> | <a href=”#”>Site Map</a> |<a href=”#”>Contact Web Master</a></p>
</div>
</div>
</body>
</html>
[CODE]
/* CSS Document */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
width: 981px;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
left: 178px;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-179px;
top:28px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:14px;
color: black;
width:139px;
padding:7px 0;
color:black;/*000*/
background:#99ffff;/*3984b3*/
text-decoration:none;
margin-right:1px;
margin-center:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:yellow;/*#444*/
text-decoration:underline;
background:blue;/*bbd6e7*/
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
BODY
{
background-attachment:scroll;
position:relative;
position:center;
background-repeat:no-repeat;
background-color:white;
background-position:center;
}
H2
{
Font-family:Arial, Helvetica, sans-serif;
Font-size: 20px;
Color: #400080;
font-weight: bold;
text-align:center;
}
H3
{
Font-family: Arial, Helvetica, sans-serif;
Font-size: 16px;
color: black;
text-align: center;
font-weight: bold;
}
p
{
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: black;
}
filetype
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: black;
}
[upl-file uuid=34aa853a-51f0-42b6-8eb1-1b82a31fde75 size=44kB]dropdownTest.zip