Spry submenu help!!!

Hello,
I read some of the other posts on spry, but Im still having trouble.
The submenus come under the image icon ok, but there are huge spaces
between them (as if ieach button submenu includes extra space the same
size as the image icon (150px x 175px)). Also, they disappear under
the content in the main section. ( I'm using DW template:i column
liquid, centered, header and footer) Where in the code do I make the
submenus appear to the right of the picture icon.. and how do I get
them closer!


thanks!



@charset "UTF-8";


/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */


/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */


/
************************************************** *****************************


LAYOUT INFORMATION: describes box model, positioning, z-order


************************************************** *****************************/


/* The outermost container of the Menu Bar, an auto width box with no
margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index
to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
*/
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container
and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
float: left;
height: 15em;
}
/* Submenus should appear below their parent (top: 0) with a higher z-
index, but they are initially off the left side of the screen
(-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to auto so it comes onto the screen
below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and
up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
*/
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}


/
************************************************** *****************************


DESIGN INFORMATION: describes color scheme, borders, fonts


************************************************** *****************************/


/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #000000;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and
white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover
with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}


/
************************************************** *****************************


SUBMENU INDICATION: styles if there is a submenu under a given menu
item


************************************************** *****************************/


/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned on
the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation
MenuBarItemSubmenuHover and are set to use a "hover" background image
positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}


/
************************************************** *****************************


BROWSER HACKS: the hacks below should not be changed unless you are an
expert


************************************************** *****************************/


/* HACK FOR IE: to make sure the sub menus show above form controls,
we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in
float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
background: #FFF;
}
}

I dunno about fixing the alignment to the left but to adjust the space
between the lines go to this section:

ul.MenuBarHorizontal li

and remove the height: 15em; line and add:

line-height:0;

play with the 0 number to increase the spacing.

I think that should work.