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.
