By ChiliPepperWeb on

I'm modifying the Litejazz theme in Drupal 6.13 and have run into a cross browser problem with the Suckerfish dropdown menu across the top that I can't figure out how to fix. In IE7, IE8, Google Chrome and Safari, the dropdown menus line up where they are supposed to underneath the parent item in the main menu. In Firefox 3.5 however, they line up under the item next door to the right, exactly as if that was the parent instead. I'm working in suckerfish_green.css and have tried all sorts of things already and spent an hour searching Google without finding a solution to this problem. Does anybody here have any suggestions?

⋅ Categories: Drupal 6.x

Comments

ChiliPepperWeb’s picture

ChiliPepperWeb commented

Found a solution:

Try adding the following line to the stylesheet:

#suckerfishmenu ul.menu li:hover, #suckerfishmenu ul.menu li li:hover, #suckerfishmenu ul.menu li li li:hover, #suckerfishmenu ul.menu li.sfhover, #suckerfishmenu ul.menu li li.sfhover, #suckerfishmenu ul.menu li li li.sfhover {
position:relative;
}

and altering this line:

#suckerfishmenu ul.menu li:hover ul, #suckerfishmenu ul.menu li li:hover ul, #suckerfishmenu ul.menu li li li:hover ul, #suckerfishmenu ul.menu li.sfhover ul, #suckerfishmenu ul.menu li li.sfhover ul, #suckerfishmenu ul.menu li li li.sfhover ul {
left: 0;
}

Thanks for this answer go to Stu Nicholls of CSSplay: http://www.cssplay.co.uk/