Hello,
Looking at the code, you have taken one of the default styles from the HouseMenu, there is something you need to do and test your site in IE7. - Unless the code has been updated, it displays incorrectly in IE7 due to the hacks used. (When Tim created HouseMenu, IE7 didn't exist and I know he is currently working on a solution.)
I have not yet had time to look into getting a horizontal menu working with drop downs, but this site provides code examples which you should be able to adapt for the HouseMenu.
http://css.maxdesign.com.au/listamatic/There is a list of Horizontal menus which you can view. - These menus provide the CSS coding for styling an unordered list, which is exactly what the HouseMenu produces.
Make sure you test your skin in IE7 and the various other browsers for any compatibility issues.
In the example you've posted Firefox is the browser that is displaying correctly, IE is wrong in that it expands to the width of the content which it is not supposed to do, so if you get your site working in Firefox, all other browsers are much more likely to display correctly.
When I first approached the HouseMenu I basically stripped out all of the CSS and started from scratch because there are a lot of hacks used in the example and it's easier to control and understand when you create it yourself.
Looking at the code for some vertical menus I have created I have not specified any widths in the actual menu code. - The width of the menu comes from the div element that holds the menu. Here is an example of a vertical menu which may help you to get started.
/* =========================
CSS STYLES FOR HouseMenu Skin Object
=========================
*/
/* Vertical Menu */
#HouseMenuNav
{
/* menu wrapper div */
border-top: solid 1px #003;
border-bottom: solid 1px #003;
margin-bottom: 10px;
}
#HouseMenuNav ul
{
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
#HouseMenuNav li
{
/* all list items */
/* border around each main menu item */
border-bottom: 1px solid #ED9F9F;
/* added for opera browser to remove bullets on lists */
list-style: none;
}
#HouseMenuNav li a:link, #HouseMenuNav li a:visited
{
/* main colour of the menu */
margin: 0;
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #95353D;
color: #FFF;
text-decoration: none;
/* added for opera */
font-size: 100%;
/* IE5.01 hack to remove large white gaps in menu */
height: 1px;
voice-family: "\"}\"";
voice-family: inherit;
/* for IE6+ and all other browsers */
height: 100%;
}
#HouseMenuNav li a:hover
{
background-color: #711515;
color: #FFF;
}
#HouseMenuNav ul ul
{
/* second level menu items */
margin-left: 12px;
}
#HouseMenuNav ul ul li
{
border-bottom: 1px solid #711515;
margin: 0;
list-style: none;
}
#HouseMenuNav ul ul a:link, #HouseMenuNav ul ul a:visited
{
background-color: #ED9F9F;
color: #711515;
}
#HouseMenuNav ul ul a:hover
{
background-color: #711515;
color: #FFF;
}
The best tip I can give is to download the developers toolbar and then use the edit CSS function to edit your CSS live on the website, this way you can strip everything out without affecting the actual file and run tests on your CSS code, you can download it from:
http://chrispederick.com/work/webdeveloper/