How do I control the vertical space between subitems in jqueryslidemenu.js?

[Interrobang]

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...el_css_menu_2/

3) Describe problem: When submenu items appear, there is a space about 2 pixels wide between each one. The element behind the submenu items shows through. I would like to get rid of that space, so that the top of each submenu item is at the same level as the bottom of the menu item above it.

While that would be enough, I would also like submenu items to be separated by a 1-pixel-wide light gray stripe.

For reference, here's the code for the menu:

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function (e)
				{
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets = {left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader ? 0 : this._dimensions.w
					menuleft = (this._offsets.left +
                                menuleft +
                                this._dimensions.subulw > $(window).width()) ?
                                    (this.istopheader ?
                                        -this._dimensions.subulw + this._dimensions.w :
                                        -this._dimensions.w)
                                    : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
			$curobj.click(function(){
				$(this).children("ul:eq(0)").hide()
			})
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

[Deadweight]

What browser are you viewing this from? I dont see any issues 0.0

[Interrobang]

What browser are you viewing this from? I dont see any issues 0.0

Thank you for your reply. I am using Google Chrome, and I saw the same behavior in IE, I believe version 9. The web site I am working on is http://www.friendsofcrowellhilaka.org . If you hover over "Endorsed By", you will see a 3-item sub-menu appear, with the element behind the sub-menu visible between the items in the sub-menu.

RobR

[Deadweight]

EDIT: I found your links. I will take a look at them tomorrow then tell you the problem (unless someone else beats me to it)