No replies
smk2007's picture
Last seen: 9 years 31 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I am in the process of creating a suckerfish drop menu in a Joomla 1.6. Currently I'm working with the 1.6 beta 1. I took the suckerfish css from a tutorial site online. The code worked for a single level drop but it was not coded for buttons. I have a two color slider button I am using. For some reason when I hover over a drop level link the left side of my button does not appear, however, it does work when the link is active. I've been at this for 3 days now and have no idea how to get this to work. If anyone has any insight as to why this isn't working properly, I will be forever grateful. Big smile

I've attached a screen shot of the drop menu issue, along with my slider button images.

Here is my html/php code

	 * @copyright	Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved.
	 * @license		GNU/GPL, see LICENSE.php
	 * Joomla! is free software. This version may have been modified pursuant
	 * to the GNU General Public License, and as distributed it includes or
	 * is derivative of works licensed under the GNU General Public License or
	 * other free or open source software licenses.
	 * See COPYRIGHT.php for copyright notices and details.
defined( '_JEXEC' ) or die ( 'Restricted access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
JHTML::_( 'behavior.mootools' );
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
		<jdoc:include type="head" />
		<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
		<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/drop-menu.css" type="text/css" />
		<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/general.css" type="text/css" />
         <script type="text/javascript" src="templates/<?php echo $this->template; ?>/js/dropmenu.js"></script>
<div id="drop-menu">
    <div class="moduletable-menu">
<ul class="menu">
<li class="item435"><a href="/joomla-beta1/index.php?option=com_content&amp;view=featured&amp;Itemid=435">Home</a></li>
<li class="item294"><a href="/joomla-beta1/index.php?option=com_content&amp;view=article&amp;id=90&amp;Itemid=294">About Us</a></li>
<li id="current" class="active item233"><a href="/joomla-beta1/index.php?option=com_users&amp;view=login&amp;Itemid=233">Login</a>
   <li class="item448"><a href="/joomla-beta1/administrator" target="_blank">Site Administrator</a></li>
<li class="item452"><a href="/joomla-beta1/index.php?option=com_contact&amp;view=contact&amp;id=3&amp;Itemid=452">Contact Us</a></li>
<li class="item454"><a href="/joomla-beta1/index.php?option=com_content&amp;view=category&amp;id=81&amp;Itemid=454">Ministries</a>
   <li class="item455"><a href="/joomla-beta1/index.php?option=com_content&amp;view=article&amp;id=91&amp;Itemid=455">Youth Groups</a></li>
   <li class="item458"><a href="/joomla-beta1/index.php?option=com_content&amp;view=article&amp;id=92&amp;Itemid=458">Life Groups</a></li>
   <li class="item459"><a href="/joomla-beta1/index.php?option=com_content&amp;view=article&amp;id=0&amp;Itemid=459">Worship</a></li>

And here is my css:

#drop-menu { font-family:"Trebuchet MS", Geneva, Arial; padding:0; margin:50px 0 0 0; font-size:1.2em; float:right; height:53px }
#drop-menu a { 
background-image: url(../images/menu-l.gif); 
background-position: 0 -56px; /*left side gray*/ 
background-repeat: no-repeat; z-index:50 !important;
#drop-menu li { 
background-position:100% -56px; /*right side gray*/ 
background-repeat:no-repeat; z-index:50 !important;
/*_______________BLUE ACTIVE AND HOVER BUTTON____________*/
/* right side blue */
#drop-menu, #drop-menu, #drop-menu li:hover { background-position:100% 0; z-index:50 !important } 
/* left side blue */
#drop-menu a, /* left hover/active link */
#drop-menu a li a, /* left first level drop when active -WORKS IN IE, FF, SAFARI, CHROME*/
#drop-menu li a li a, 
#drop-menu a:hover { background-position:0 0; z-index:50 !important } 
#drop-menu ul { list-style:none; margin:0; padding:0; float:left; height:27px; line-height:27px; font-size:90% }
#drop-menu li ul { position:absolute; width:220px; left:-999em; margin:0 }
#drop-menu li:hover ul { left:auto; padding:0  }
#drop-menu li ul li { width:220px; padding:0; border-bottom:1px solid #ccc; line-height:27px; font-size:90% }
#drop-menu li a { display:block; text-decoration:none }
#drop-menu a, #drop-menu a {
	margin:0 5px 0 0;
	padding:0 13px 0 17px;
    overflow:hidden; z-index:50 !important;
html>body #drop-menu li a { width:auto }
#drop-menu li ul li a { background:#eeefeb; width:190px /* filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;*/ }
#drop-menu li a:hover, a#active_menu:link, a#active_menu:visited { color:#057089; text-decoration:none  /* filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;*/ }
#drop-menu li ul li a:hover { background:#f3f5f1 }
#drop-menu li:hover ul, #drop-menu li.sfhover ul { left:auto }
#drop-menu ul a { color:#057089; text-decoration:none }
#drop-menu a { color:#000; text-decoration:none }
#drop-menu a:hover { color:#057089 }
#drop-menu ul li a { color:#057089; text-decoration:none }
#drop-menu ul li a:hover { color:#057089; text-decoration:none }

dropmenu-problem.jpg50.18 KB
menu-l.gif1.28 KB
menu-r.gif3.45 KB