Stumped by IE7, and my theme CSS, and Superfish menus...

I'm adapting Pixture Reloaded into my own theme. Trying to unravel where I can make fixes. Site link: http://lgbtconsortium.org.uk/_drupal_test/

I have changed the margin and padding of the menu items to make them fit the menu bar in my theme. And used #color instead of the background tile, so I can use a rounded corner graphic.
In style.css:

/* Superfish skin - edited FG */

#superfish-inner {
   font-family: Calibri, Verdana, Arial, sans-serif;
}

#superfish-inner .menu {
  float: left;
  margin: 0 0 0 -12px;
}
#superfish-inner .menu a {
  padding: 6px 12px 3px;
  background: #048 url("../consortium01/images/corneround_br.png") no-repeat bottom right;
  text-decoration:none;
}
#superfish-inner .menu a, 
#superfish-inner .menu a:visited  { 
  color: #FFF;
}
#superfish-inner .menu li {
  background: #048;
}
/* submenu list items */
#superfish-inner .menu li li {
  background: #048;
}
#superfish-inner .menu li li li {
  background: #048;
}
/* end submenu list items */

#superfish-inner .menu li:hover, 
#superfish-inner .menu li.sfHover,
#superfish-inner .menu a:focus, 
#superfish-inner .menu a:hover, 
#superfish-inner .menu a:active {
  background: #f80 url("../consortium01/images/corneround_br.png") no-repeat bottom right; 
  outline: 0;
}

In layout.css:

/*-------------------------------------------------------------------*/
/*                               Header                              */
/*-------------------------------------------------------------------*/
#header {
  margin: 0 0 15px 0;
  padding: 0;
  height: 160px;
}
#logo {
  margin: 15px 0 0 15px;
  padding: 0;
  height: 100px;
  float: left;
  overflow: hidden;
}
#head-elements {
  height: 125px;
  margin: 0 0 0 0px;
  padding: 0;
}

I've got problems with the drop down menu appearance:

1. in IE7
- The drop down list items now have a sliver of colour background that changes on rollover on the between them (which I believe comes from class "#superfish-inner .menu li li:hover" in the css).
- Can I adjust the height of the link background to cover this?
- I don't want my menu links to have meaningless rollover changes between them in the drop down.

2. In Firefox and IE
- I'd like the dropdowns to not overlap the primary horizontal menu bar. There is something like a 3px overlap at the top, and I don't know how to target that in styles, without messing up the primary menu position.

Would it be a better approach:
- to remove all extra padding and margins in the inner menu class,
- create a container div to hold the navs with the correct color background,
- and remake the header background graphic, so there is no prescribed visual area for the primary links (currently there is a blue background bar included in the header graphic)?

Please give detailed instructions, I'm not an advanced CSS person.
I know Mr Burnz is often busy, I'll welcome help from anyone... (not sure where else to post this for support)

attached is my header graphic