Hi, i've been trying to create a dropdown menu using the superfish v1.4.8 script and the bgiframe plugin (tried bot the latest, 2.1.1 version and the one included in the superfish package).
Everything works fine with just the superfish script, the menu behaves correctly and all the styles are applied, the only problem is that select elements show throught the dropdown, so i tried adding the plugin. As soon as i add the plugin the menus get screwed up, all stylings are lost and the menus become white boxes with the menu links in white and the "false" word in black. This is the same issue: http://groups.google.com/group/jquery-en/browse_thread/thread/cd93c50eb6b74ac5/ae06cf9ac0d2b6db?lnk=gst&q=+Superfish+bgiframe#ae06cf9ac0d2b6db but the thread offers no solutions Here's the code, any help would be MUCH appreciated :) ********************************************************** HTML ********************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html lang="en"> <head> <title>A very basic Superfish menu example</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="css/asuperfish.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/scratch.css" media="screen"> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></ script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/ jquery.bgiframe.min.js"></script> <script type="text/javascript" src="js/superfish.js"></script> <script type="text/javascript"> // initialise plugins jQuery(function(){ $("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false}); // jQuery('ul.sf-menu').superfish(); }); </script> </head> <body> <div id="header"><img src="img/header_left.gif" alt="" width="16" height="50" /><img src="img/header_logo.gif" alt="Portale TSP" width="142" height="50" /></div> <div id="menu"> <ul class="sf-menu"> <li> <a href="#a"><img src="img/menu_gestionali.gif" width="125" height="23" /></a> <ul class="submenu"> <li><h1>GESTIONE SOGGETTI</h1></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Super Brand</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Brand</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Esercenti</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Punti vendita</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Terminali</a></li> <li><h1>GESTIONE ANAGRAFICA</h1></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Utenti</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Funzionalità</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Terminali</a></li> </ul> </li> <li> <a href="#"><img src="img/menu_statistiche.gif" width="174" height="23" /></a> <ul class="submenu"> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Statistica 1</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Statistica 2</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Statistica 3</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Statistica 4</a></li> </ul> </li> <li> <a href="#"><img src="img/menu_operativita.gif" width="134" height="23" /></a> <ul class="submenu"> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Operazione 1</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Operazione 2</a></li> <li><a href="#"><img src="img/menu_bullet.gif" alt=">" width="4" height="7" /> Operazione 3</a></li> </ul> </li> </ul> </div> <div id="main" style="clear: both"> <form id="mainForm" method="get" action=""> <input name="" type="button" /> <label for="button"></label> <input type="submit" name="button" id="button" value="Submit" /> <input name="" type="text" /> <label for="select"></label> <select name="select" id="select"> <option value="prova">prova</option> <option value="prova">prova</option> </select> <select name="select2" id="select2"> <option value="prova">prova</option> <option value="prova">prova</option> </select> <select name="select3" id="select3"> <option value="prova">prova</option> <option value="prova">prova</option> </select> <select name="select4" id="select4"> <option value="prova">prova</option> <option value="prova">prova</option> </select> </form> </div> </body> </html> ********************************************************** CSS ********************************************************** /* CSS Document */ body { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; } .textfield { border: 1px solid #1c9999; background: #ff8d2f url(../img/textfield_bg.gif) repeat-x; color: #5f5f5f; } input.rounded { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-box-sizing:content-box; border-style:solid; border-width:1px; border-color: #1c9999; text-shadow:0 1px 0 #FFFFFF; cursor:pointer; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; font-size:11px !important; line-height:16px; padding:2px 8px; text-decoration:none; color: #1c9999; background:#ffba2f url(../img/button_bg.gif) repeat-x scroll left top; } img { border: 0px; } #header { width: 100%; height: 50px; background: #ff8d2f url(../img/header_bg.gif) repeat-x; } #menu { width: 100%; height: 25px; background: #ff8d2f url(../img/menu_bg.gif) repeat-x; border: 1px solid #1c9999; } ul { padding: 0; margin: 0; list-style: none; } li { float: left; position: relative; width: 10em; } li ul { display: none; position: absolute; top: 1em; left: 0; } li h1 { font-size: 12px; } li > ul { top: auto; left: auto; } li:hover ul { display: block; } ul.submenu { background: #1c9999 url(../img/menu_dropdown_bg.gif) repeat-x; border: 1px solid #1c9999; padding: 3px; } ul.submenu li { color: white; font-size: 12px; min-width: 150px; } ul.submenu li a { color: white; text-decoration: none; padding-left: 3px; padding-top: 1px; font-size: 12px; } ul.submenu li a:hover { font-weight: bolder; }
