Hey guys -- I recently implemented a CSS/Javascript menu for my employer, www.gayot.com. After installing the menu it appears to work fine in all browsers except for Opera. In Opera, as you can see at the http://www.gayot.com homepage, the menu items collapse under one another after hovering over, then moving your mouse away from a main navigation bar. I've tried several things to try to resolve this issue, but am continuously stumped. Any help would be greatly appreciated. Cheers, Mike /* 800px HORIZONTAL FREESTYLE MENU LAYOUT */ /* All <ul> tags in the menu including the first level */ .menulist800, .menulist800 ul { margin: 0; padding: 0; list-style: none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-align: left; } /* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */ .menulist800 ul { display: none; position: absolute; top: 1.0em; margin-top: 16px; /* I'm using ems and px to allow people to zoom their font */ left: -1px; width: 150px; } /* Second and third etc. level submenus - position across from parent instead */ .menulist800 ul ul { top: -1px; margin-top: 0; left: 148px; } /* All menu items (<li> tags). 'float: left' lines them up horizontally, and they are positioned relatively to correctly offset submenus. Also, they have overlapping borders. */ .menulist800 li { float: left; display: block; position: relative; background: #FFF; border: 0px solid #330; margin-right: 0px; } /* Items in submenus - override float/border/margin from above, restoring default vertical style */ .menulist800 ul li { float: none; margin: 0; margin-bottom: -1px; border: 1px solid #330; } .menulist800 ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ } /* Links inside the menu */ .menulist800 a { display: block; padding: 6px; color: #000; text-decoration: none; } /* Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */ .menulist800 a:hover, .menulist800 a.highlighted:hover, .menulist800 a:focus { color: #FFF; background-color: #5b7eb1; text-decoration: none; } .menulist800 a.highlighted { color: #000; background-color: #d4e3fa; } /* Only style submenu indicators within submenus. */ .menulist800 a .subind { display: none; } .menulist800 ul a .subind { display: block; float: right; } /* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */ .menulist800 a { float: left; } .menulist800 ul a { float: none; } /* \*/ .menulist800 a { float: none; } /* */ .menulist800 a#home, .menulist800 a#restaurants, .menulist800 a#hotels, .menulist800 a#travel, .menulist800 a#lifestyle, .menulist800 a#events, .menulist800 a#wine, .menulist800 a#food, .menulist800 a#community, .menulist800 a#about, .menulist800 a#login { background: url(http://gayot.com/Beta2/images/bg_off_gray.gif); color: #222; padding: 7px 8.35px 8px 8px; border-left: 1px solid #666; text-transform: uppercase; font-size: 10px; font-weight: bold; text-align: center; float: left; margin: 0; } .menulist800 a#restaurants { background: url(http://gayot.com/Beta2/images/bg_on_gray.gif); color: #fff; } .menulist800 a#home { border-left: none; } .menulist800 a#home:hover, .menulist800 a.highlighted#home, .menulist800 a#home:focus, .menulist800 a#restaurants:hover, .menulist800 a.highlighted#restaurants, .menulist800 a#restaurants:focus, .menulist800 a#hotels:hover, .menulist800 a.highlighted#hotels, .menulist800 a#hotels:focus, .menulist800 a#travel:hover, .menulis800 a.highlighted#travel, .menulist800 a#travel:focus, .menulist800 a#lifestyle:hover, .menulist 800 a.highlighted#lifestyle, .menulist800 a#lifestyle:focus, .menulist800 a#events:hover, .menulist800 a.highlighted#events, .menulist800 a#events:focus, .menulist800 a#wine:hover, .menulist800 a.highlighted#wine, .menulist800 a#wine:focus, .menulist800 a#food:hover, .menulist800 a.highlighted#food, .menulist800 a#food:focus, .menulist800 a#community:hover, .menulist800 a.highlighted#community, .menulist800 a#community:focus, .menulist800 a#about:hover, .menulist800 a.highlighted#about, .menulist800 a#about:focus, .menulist800 a#login:hover, .menulist800 a.highlighted#login, .menulist800 a#login:focus { background: url(http://gayot.com/Beta2/images/bg_on_gray.gif); color: #fff; text-decoration: none; display: block; } /* HACKS: IE/Win: A small height on <li> and <a> tags and floating prevents gaps in menu. * html affects <=IE6 and *:first-child+html affects IE7. You may want to move these to browser-specific style sheets. */ *:first-child+html .menulist800 ul li { float: left; width: 100%; } * html .menulist800 ul li { float: left; height: 1%; } * html .menulist800 ul a { height: 1%; } /* End 800px javascript menu */ Code (markup):