Menu works great in firefox but IE7 or IE8 doesn't work

Posted on 2011-03-08

1 solution

Medium Priority

339 Views

Last Modified: 2012-05-11

I have created a beautiful vertical menu that works great in FireFox but doesn't work in IE7 or IE8 so not sure what is the cause. Here is the code below

<html>
<head>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	background:#555555;
}
.innerMenu {
	margin-top:20px;
}
ul.innerMenu li {
	font-size:13px;
	width:170px;
	height:25px;
	color:#fff;
	font-weight:normal;
	list-style:none;
	background:url(/images/myarrow.png) right top no-repeat;
}
ul.innerMenu li:hover {
	width:170px;
	height:25px;
	background:#252525 url(/images/myarrow.png) right top no-repeat;
}
ul.innerMenu li:hover .subMenu {
	left:200px;
	top:auto;
	top:20px;
}
.submenu li {
	width:165px;
	height:30px;
	padding:5px;
}
.submenu li:hover {
	width:165px;
	height:30px;
	padding:5px;
}
.innerMenu li a:link {
	color:#fff;
	text-decoration:none;
}
.innerMenu li a:visited {
	color:#fff;
}
.innerMenu li a:hover {
	background:#252525;
}
.subMenu {
	float: left;
	left: -999em;/* Hide Div layers */
	margin: 0px auto;
	position: absolute;
	text-align: left;
}
</style>
</head>
<body>
<!--Start menu -->
<ul class="innerMenu">
  <li><a href="#">Main Item 1</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 2</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 3</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 4</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item --> 
  
  <!--Start Menu -->
  <li><a href="#"> Main Item 5</a>
    <div class='submenu'>
      <ul>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
        <li><a href="#">Item4</a></li>
        <li><a href="#">Item5</a></li>
      </ul>
    </div>
  </li>
  <!--End Menu Item -->
  
</ul>
<!--End Menu -->

</body>
</html>