• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 934
  • Last Modified:

CSS/Javascript DropOVER menu

Hello experts,

I've been trying to get a vertical dropOVER menu working correctly.  I've done normal  dropdown's before but this time I need to have the menu expanding to the right of the element, not underneath like normal menu's do.

I've tried to Google it to no avail.  At this point it doesn't matter to me if it requires creating images.  Ideally I wanted something done in pure CSS and/or Javascript and/or whatever else; I just need to get this working.

Just for an example:


I made that site and I really like the dropdown there, but is there any way to modify it so instead of the menu dropping down, I could change X-Y coordinates to have it expand to the side instead?

I've included the Javascript and CSS files, as well as the header where the dropdown is happening.  I'm thinking modifications to that CSS file might do the trick?.

Help please :)
  • 2
  • 2
1 Solution
RobinSoftware EngineerCommented:
jpveAuthor Commented:
Thank you so much, the points are yours, but I've got a question if you don't mind:


That's the temporary site I'm using it for.  Hovering over SEO Website Optimization expands 2 sub-links, then hovering over either on of those expands more.  Notice, however, when you hover over the sub-links to display the child links, it shifts the site about 50px to the left.

I'm positive this is a CSS issue, but I'm not really sure how to solve it.  The page I'm working on has inline CSS styles being used, but in the site is also calling a default.css file from the root that I'm guessing is causing a conflict because notice if you hover spots in the content area, it will turn the bg color of a TD gray?

Like I said, the points are yours - more if you can help me with part 2.  I've included both the page with the inline styles (it's actually a PHP include), and default.css.

RobinSoftware EngineerCommented:
Well, at the moment the whole menu is visible (in IE7 en FireFox).

Are you testing with it?
jpveAuthor Commented:
I was testing it, but gave up and decided to try another script.  If anyone wants to help, I'm all ears :)

It's the Suckerfish script, which I'm sure there are members here who are a whole lot more familiar with it than I am.  Here's what I've got done so far:


If you hover over Website Usability, you'll see another menu expand "1", then hovering over that you'll see Menu Item 1, 2, 3, 4 and 5.  That's the part step I want to eliminate.  Instead of having that "1" menu, I'd like for what expands from the "1" menu to instead expand for Website Usability, if possible.

This is my first attempt @ using the magic combo of CSS and lists, so wish me luck.  In the pasted code is superfish.js.  I've included the rest as files.

 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
	$.fn.superfish = function(op){
		var sf = $.fn.superfish,
			c = sf.c,
			$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
			over = function(){
				var $$ = $(this), menu = getMenu($$);
			out = function(){
				var $$ = $(this), menu = getMenu($$), o = sf.op;
					if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
			getMenu = function($menu){
				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
				sf.op = sf.o[menu.serial];
				return menu;
			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
		return this.each(function() {
			var s = this.serial = sf.o.length;
			var o = $.extend({},sf.defaults,op);
			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
				$(this).addClass([o.hoverClass,c.bcClass].join(' '))
			sf.o[s] = sf.op = o;
			$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
				if (o.autoArrows) addArrow( $('>a:first-child',this) );
			var $a = $('a',this);
				var $li = $a.eq(i).parents('li');
		}).each(function() {
			var menuClasses = [c.menuClass];
			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
			$(this).addClass(menuClasses.join(' '));
	var sf = $.fn.superfish;
	sf.o = [];
	sf.op = {};
	sf.IE7fix = function(){
		var o = sf.op;
		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
	sf.c = {
		bcClass     : 'sf-breadcrumb',
		menuClass   : 'sf-js-enabled',
		anchorClass : 'sf-with-ul',
		arrowClass  : 'sf-sub-indicator',
		shadowClass : 'sf-shadow'
	sf.defaults = {
		hoverClass	: 'sfHover',
		pathClass	: 'overideThisToUse',
		pathLevels	: 1,
		delay		: 800,
		animation	: {opacity:'show'},
		speed		: 'normal',
		autoArrows	: true,
		dropShadows : true,
		disableHI	: false,		// true disables hoverIntent detection
		onInit		: function(){}, // callback functions
		onBeforeShow: function(){},
		onShow		: function(){},
		onHide		: function(){}
		hideSuperfishUl : function(){
			var o = sf.op,
				not = (o.retainPath===true) ? o.$path : '';
			o.retainPath = false;
			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
			return this;
		showSuperfishUl : function(){
			var o = sf.op,
				sh = sf.c.shadowClass+'-off',
				$ul = this.addClass(o.hoverClass)
			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
			return this;

Open in new window


Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now