Hello everybody! I am working on finishing a site that another web designer started, and am a total newb to Superfish and not very strong in CSS/JS troubleshooting. We are using a horizontal menu with a horizontal submenu below it. It looks beautiful in FF, in IE 6/7 it is rendering the submenus vertically. Please help!!! My eternal gratitude to whomever can help. We are needing to get this site up 2 months ago and this is the only holdup.
See for yourself: http://www.moreorlessmyself.com/linc <-- using older libraries or http://www.thelincolncenterspokane.com/test/ <--- using the latest superfish and jquery files HTML: <!-- header 980 x 202 --> <ul id="primary_nav" class="clearfix sf-menu sf-navbar"> <li class="primary_nav_home"><a href="index.html" title="The Lincoln Center Home">Home</a></li> <li class="primary_nav_about"><a href="about.html" title="About The Lincoln Center Spokane">About</a> <ul> <li class="page_item"><a href="about.html" title="About The Lincoln Center Spokane">About The Lincoln Center</a></ li> <li class="page_item"><a href="management_team.html" title="The Lincoln Center Management Team">Management Team</a></li> </ul> </li> <li class="primary_nav_services"><a href="services.html" title="Lincoln Center Services">Services</a> <ul> <li class="page_item"><a href="the_wedding_experience.html" title="The Wedding Experience at The Lincoln Center Spokane">The Wedding Experience</a></li> <li class="page_item"><a href="meetings_and_corporate_events.html" title="Meetings & Corporate Events at The Lincoln Center Spokane">Meetings & Corporate Events</a></li> <li class="page_item"><a href="special_events.html" title="Special Events at The Lincoln Center Spokane">Special Events</a></li> <li class="page_item"><a href="catering.html" title="Catering at The Lincoln Center Spokane">Catering</a></li> </ul> </li> <li class="primary_nav_facility current_page_item"><a href="facilities.html" title="Lincoln Center Facilities">Facilities</ a> <ul> <li class="page_item"><a href="monroe_ballroom.html" title="The Monroe Ballroom at The Lincoln Center Spokane">The Monroe Ballroom</a></li> <li class="page_item"><a href="lincoln_ballroom.html" title="The Lincoln Ballroom at The Lincoln Center Spokane">The Lincoln Ballroom</a></li> <li class="current_page_item"><a href="#" title="The Library at The Lincoln Center Spokane">The Library</a></li> <li class="page_item"><a href="landau_conference_room.html" title="The Landau Conference Room at The Lincoln Center Spokane">Landau Conference Room</a></li> <li class="page_item"><a href="maxwell_board_room.html" title="The Maxwell Board Room at The Lincoln Center Spokane">Maxwell Board Room</a></li> <li class="page_item"><a href="art_gallery_foyer.html" title="The Art Gallery Foyer at The Lincoln Center Spokane">Gallery Foyer</a></li> </ul> </li> <li class="primary_nav_pack"><a href="faq.html" title="Lincoln Center Frequently Asked Questions">FAQ's</a> </li> <li class="primary_nav_newsevents"><a href="public_events.html" title="Lincoln Center News & Events">News & Events</a> </li> <li class="primary_nav_contact"><a href="location.html" title="Contact The Lincoln Center">Contact</a> <ul> <li class="page_item"><a href="location.html" title="How To Find The Lincoln Center Spokane">Location & Map</a></li> <li class="page_item"><a href="contact.html" title="Contact The Lincoln Center Spokane">Contact Info</a></li> <li class="page_item"><a href="quote.html" title="Getting Started with your Lincoln Center Event">Getting Started</a></li> </ul> </li> </ul> </div> CSS: body{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font- weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical- align:text-bottom;} input, textarea, select{font-family:inherit;font-size:inherit;font- weight:inherit;} /* GLOBAL ------------------- */ body { background:#171717 ; font: 63.7%/1.55 Verdana, Arial, sans- serif; color:#333 ; } /* =Clearfix */ .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ /* HEADER ------------------- */ #header { background: #171717 url(../img/img_home.jpg) no-repeat 0 0; width: 980px; height:202px; } #header h1 {} #header h1 a { display: block; width: 260px; height: 202px; } #header p { margin-left: 300px; } /* NAVIGATION ------------------- */ #primary_nav { background:#753425; padding-bottom: 36px; font-family: Avenir, Arial, sans-serif; margin: 0;} #primary_nav li { float: left; text-align: center; background: #171717 url(../img/bg_prim_nav_bl.gif) repeat-x top; margin: 0; list-style: none; } #primary_nav a { display: block; height:36px; text-transform: uppercase; text-decoration: none; font-size: 1.1em; color:#ccc; line- height: 2.7 } #primary_nav a:hover, #primary_nav li.sfHover a, #primary_nav li.sf-breadcrumb a { color:#ffffff; background: #753425; } #primary_nav li.current_page_item a, #primary_nav li.current_page_parent a, #primary_nav li.current_page_ancestor a { color:#ffffff; background: #753425 url(../img/bg_prim_nav_current.gif) repeat-x top; } #primary_nav .primary_nav_home a { width: 115px; } #primary_nav .primary_nav_about a { width: 120px; } #primary_nav .primary_nav_services a { width: 160px; } #primary_nav .primary_nav_facility a { width: 160px; } #primary_nav .primary_nav_pack a { width: 115px; } #primary_nav .primary_nav_newsevents a { width: 180px; } #primary_nav .primary_nav_contact a { width: 130px; } #primary_nav ul { width: 980px; margin: 0; } #primary_nav .current_page_item ul, #primary_nav .sfHover ul { display: block !important; visibility:visible !important; width:100%; background:#753425; } #primary_nav ul li { } #primary_nav ul li a { background: #753425; text-transform:none; width: auto !important; padding: 0 18px; font-size: 1em; line-height: 2.4; color:#fff; float:right;} #primary_nav ul li a:hover { text-decoration: underline;} #primary_nav ul li.current_page_item a, #primary_nav li.current_page_ancestor ul li a, #primary_nav li.current_page_item ul li a { background: #753425; } /* MAIN CONTENT ------------------- */ .columns { margin: 0 20px 30px;} .columns.no_margin { margin-bottom: 0;} .col_left { width: 300px; float:left; margin-right: 20px; } .col_left.intro {width: 720px; margin-right: 0;} .col_left.wide {width: 620px; margin-right: 0;} .half {width: 460px !important; margin-right: 0; } .wide ul.col_left { margin-right:0; } .col_mid { width: 302px; float: left; } .col_right { width: 300px; float:right; } .col_right.wide {width: 620px;} .col_right.first {margin-top: 45px; } .col_right.faqjump {margin-top: 60px; } /* BASIC STRUCTURE ------------------- */ #page_wrap { margin: 0 0;} #container { background: #f7f6ef url(../img/home_head_bg.png) repeat-x top center; } .wrap { width: 980px; margin: 0 auto; background:#fff;} #container .wrap {background: #fff url(../img/bg_flax.png) 560px bottom no-repeat; padding-bottom:1px; } /* TYPE ------------------- */ p { font-size: 1.2em; margin-bottom: 15px; letter-spacing:-0.008em;} small {} strong { font-weight:bold;} em {} /*h1, h2 { font-family:Georgia, "Times New Roman", Times, serif;}*/ h1, h2, h3,h5 { font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font-size: 2.2em;} h2 { font-size: 3.2em; margin: 10px 0 5px; letter-spacing: -.05em} #homeH2 { margin: 15px 0 -10px 0; } h3 { font-size: 1.8em; margin: 1.4em 0 .45em; color:#000; } #homeH3 { margin: 0 0 10px 0; color:#333333 } h4 { font-size: 1.4em; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #edecec; margin:20px 0 13px; font-family: Verdana, Arial, Helvetica, sans-serif;} h5 { font:bold 1.5em/1.3 Arial, Helvetica, sans-serif; margin-top: 15px; color:#272727;} h5 em {font-size: 1.65em; } h5 a {text-decoration: none; } h5 a:hover {text-decoration:underline } p.intro {font-size: 1.4em; margin-bottom: 20px; } p.readMore { line-height: 2; margin:0 0 20px 8px; text-align:right; } p.readMore a { color:#666666; background-image:url(../img/ readMoreArrow.gif); background-repeat:no-repeat; background- position:right center; padding:18px; } p.date {color:#cccccc; font-size:1em !important; text-transform: uppercase;} p.small { font-size: 1em; color:#ccc; } /* LINKS ------------------- */ a { color:#753425 ; text-decoration:underline; } a:hover { text-decoration: none; } .hide { text-indent:-9999em; outline: none; } .alignright { float:right; } .alignleft { float:left; } /* LIST STYLES ------------------- */ ul { margin: 0 0 1em 1.5em; } ol {} li { list-style: outside; list-style-type:disc; font-size: 1.2em; margin-bottom: 1px; letter-spacing:-0.01em;} div.col_right ul {margin-left: 0;} div.col_right li {list-style: none;} /* ETC ------------------- */ .faq_article { border-bottom:1px solid #EDECEC; padding-bottom:20px; margin-bottom:20px; } ul.col_left, ul.col_right {width: 200px; padding-left: 20px; margin-left: 0;} span.clear{clear:both;} .wide ul.col_left, .wide ul.col_right {width: 290px; } /* HOME PAGE IMAGE LINKS ------------------- */ .teaser a { display: block; width: 310px; height:128px; margin-bottom: 15px; /*margin-top:40px;*/ } .teaser.wide a { width: 597px; } .teaser a:hover { background-position: bottom left !important; } #home_corporate a { background:url(../img/corp.png) no-repeat 0 0; } #home_wedding a{ background:url(../img/wed.png) no-repeat 0 0; } #home_special a { background:url(../img/spec.png) no-repeat 0 0; } /* OTHER IMAGE LINKS ------------------- */ a .right_img {border: 3px solid #CCCCCC; margin-bottom: 5px;} a:hover .right_img {border: 3px solid #CCCCCC;} img.alignright { padding:0; margin:0 10px 10px 15px; } img.alignleft { padding:0; margin:0 15px 10px 10px; } a img, a:hover img { border: none; } /* TABLES ------------------- */ table {} td {} table{font-size:1.2em;} table.tariff{width:620px;margin-bottom:20px;} table tr td{padding:4px;/*border-top:1px solid #e0dfdf;*/ border- bottom: 1px solid #e0dfdf;} table tr td.center{text-align:center;} table tr td.noline{text-align:center;border-bottom: 0px;} table tr td.feature{text-align:left;width:218px;} table tr td.data{text-align:right;width:134px;text-align:center;} table tr td.data.c{text-align:center;width:134px;text-align:center;} table tr.title{font-size:1.4em;background:#e7e3d0;color:#666;border- bottom:1px solid #cfcbba;} table tbody tr.price td{color:#000;font-weight:bold;padding:12px 4px;vertical-align:top;} /* FOOTER ------------------- */ p#spaver {padding-bottom: 80px;} #footer { background:#171717 url(../img/bg_footer_tile2.png) repeat-x top center; color:#f5f5f5; } #footer .wrap { background:#272727 url(../img/bg_footer_tile.png) repeat-x top center; padding-top: 39px;} #footer .columns { margin-bottom: 0; background: url(../img/ bg_footer_flax.png) no-repeat bottom left; } #footer .item {margin-bottom: 8px; } #footer a {color:#dbd8bd;} #footer ul { margin: 0; } #footer li {list-style: none;} #footer p {font-size:1.2em; color:#cccccc;} #footer h4 { font-family: Verdana, Arial, Helvetica, sans-serif; color:#f1f1f1; margin:0 0 13px;} #footer h5 { color:#FFF7ED; margin:0; font-size: 1.3em; font-family: Arial, Helvetica, sans-serif; text-transform: none; font-weight: normal; } #footer h5 a { text-decoration: none;} #footer h5 a:hover { text-decoration: underline;} /* PLUGINS ------------------- */ /* SUPERFISH ------------------- */ .sf-menu ul { position: absolute; top: -999em; left:0; /*width: 10em; left offset of submenus need to match (see below) */ } .sf-menu ul li { } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 36px; /* match top ul list item height */ z-index: 80; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } /*** adding sf-navbar class in addition to sf-menu creates an all- horizontal nav-bar menu ***/ .sf-navbar { height: 36px; /* padding-bottom: 2.5em; */ position: relative; } .sf-navbar li { position: static; } .sf-navbar a { border-top: none; } .sf-navbar li ul { /*width: 44em; IE6 fix*/ } .sf-navbar li li { position: relative; } .sf-navbar li li ul { } .sf-navbar li li { /*width: 100%;*/ } .sf-navbar ul li { width: auto; float: left; } .sf-navbar a, .sf-navbar a:visited { border: none; } .sf-navbar li.current { } .sf-navbar li:hover, .sf-navbar li.sfHover, .sf-navbar li li.current_page_item, .sf-navbar a:focus, .sf-navbar a:hover, .sf-navbar a:active { } .sf-navbar ul li:hover, .sf-navbar ul li.sfHover, ul.sf-navbar ul li:hover li, ul.sf-navbar ul li.sfHover li, .sf-navbar ul a:focus, .sf-navbar ul a:hover, .sf-navbar ul a:active { } ul.sf-navbar li li li:hover, ul.sf-navbar li li li.sfHover, .sf-navbar li li.current li.current, .sf-navbar ul li li a:focus, .sf-navbar ul li li a:hover, .sf-navbar ul li li a:active { } ul.sf-navbar .current_page_item ul, ul.sf-navbar .current_page_parent ul, ul.sf-navbar .sf-breadcrumb ul ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul { left: 0; top: 36px; /* match top ul list item height */ } ul.sf-navbar .current_page_parent ul ul { top: -999em; } .sf-navbar li li.current_page_item > a { text-decoration: underline !important; } ul.sf-navbar li ul { display:block !important; visibility:visible !important; }