Jump to content

Step problem on JS fly out menu in IE9


Recommended Posts

I am having a problem with a fly out menu with JS - the menu steps down. I have tried changing the menu to inline as opposed to block, but it still doesn't resolve the problem. Any help would be much appreciated. Here's the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>		<style>			*{				padding:0;				margin:0;			}			 body{				background-color:#f0f0f0;				font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;			}			h1{font-size: large;text-transform: uppercase;color: #ddd;position: absolute;text-shadow: 0 1px 0 #fff;top: -25px;left: -20px;white-space: nowrap;			}		  			.box{				border:5px solid #000;				margin:10px 0px 0px -15px;				height:60px;				position:relative;				padding:0px 5px 15px 25px;				background:#000;			}			.box h2{				text-transform: uppercase;				color:#ccc;			}		</style>	</head>	<body>		<div class="content">		  <div class="box">			<h2> </h2>			<div id="ui_element" class="mh_wrapper">			  <ul>				  <li><a href="#" class="hover">Menu Item A</a></li>						<li><a href="#">Menu Item B</a></li>						<li><a href="#">Menu Item </a></li>					</ul>					<div class="mh_itemMain">What's New</div>					<div class="mh_right"></div>				</div>			</div>		</div>		<div></div>	  	</body></html>

and here's the JS:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>		<script type="text/javascript">			$(function() {				//graceful degradation				$('#ui_element').find('ul').css({					'left' : '-660px'				}).siblings('.mh_right').css({					'left' : '200px'				});  				var $arrow = $('#ui_element').find('.mh_right');				var $menu  = $('#ui_element').find('ul');				$arrow.bind('mouseenter',function(){					var $this  = $(this);					$this.stop().animate({'left':'160px'},50);					$menu.stop().animate({'left':'202px'},500,function(){						$(this).find('a')						.unbind('mouseenter,mouseleave')						.bind('mouseenter',function(){							$(this).addClass('hover');						})						.bind('mouseleave',function(){							$(this).removeClass('hover');						});					});				});				$menu.bind('mouseleave',function(){					var $this  = $(this);					$this.stop().animate({'left':'-660px'},500,function(){						$arrow.stop().animate({'left':'200px'},500);					});				});			});		</script>

and here's the CSS:

.mh_wrapper{  height:40px;  position:absolute;  top:20px;  left:0px;  font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;  font-size:16px;  text-transform:uppercase;}.mh_itemMain{color: #f0f0f0;z-index: 10;border: 1px solid #333;background-color: #333;cursor: pointer;text-align: left;font-weight: bold;text-indent: 20px;height: 30px;width: 200px;position: absolute;top: 0px;left: 0px;text-shadow: 1px 1px 1px #000;padding-top: 10px;}.mh_itemMain:hover{  color:#fff;}.mh_right{	width:40px;	height:40px;	position:absolute;	left:160px;	top:0px;	cursor:pointer;	border:1px solid #ccc;	background:#ccc url(right.png) no-repeat center center;}.mh_wrapper ul {  position:absolute;  left:202px;  top:0px;  width: 900px;  list-style:none;  padding:0px;  height:30px;}.mh_wrapper ul li a{  text-decoration:none;  cursor:pointer;  display:block;  float:left;  margin:0px;  text-indent:0px;  padding:10px 10px 0px 3px;  height:30px;  text-indent:10px;  letter-spacing:1px;  color:#ddd;  background-color:#666;  text-shadow:1px 1px 1px #000;  border:1px solid #333;  border-left:none;}.mh_wrapper ul li a.hover{  background:#999;  color:#fff;  -moz-box-shadow:0px 0px 3px #000 inset;  -webkit-box-shadow:0px 0px 3px #000 inset;  box-shadow:0px 0px 3px #000 inset;}

You can see how it looks at:http://nhwines.com/f...ex_sample6.html Any help would be greatly appreciated.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...