Spry Dropdown and IE6 problem

child menu expands parent when hovered

[bizerk784]

I am fairly new to Dreamweaver and CSS and I am creating a site with a Spry horizontal dropdown menu. The menu seems to work properly in IE7 and FF but not in IE6. When you hover over a link in the submenu it expands the parent link width to its own I cant figure out why.. You can check it out at <> Here is my CSS code. Any help would be appreciated.

@charset "UTF-8";

ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
list-style-type: none;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 10em;
position: absolute;
left: -1000em;
float:none;
top:auto;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;

margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
margin-top: -5%;
}
ul.MenuBarHorizontal ul a {
border: 1px solid #000000;
}
ul.MenuBarHorizontal ul li {
width: 15em;
clear: left;
float: none;

}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #FFFFFF;
text-decoration: none;
background-image: url(../images2/navbar.jpg);
background-repeat: repeat-x;
font-weight: bold;
list-style-type: none;
padding-top: 8px;
padding-right: 11px;
padding-bottom: 0.5em;
padding-left: 20.5px;
font-size: 16px;
}
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{

color: #FFF;
background-image: url(../images2/tester.jpg);
background-repeat: repeat-x;
width: auto;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{

color: #FFF;
background-image: url(../images2/tester.jpg);
background-repeat: repeat-x;
width: auto;
}
ul.MenuBarHorizontal ul a, ul.MenuBarHorizontal ul a.MenuBarItemSubMenu
{
background-image: url(../images2/img101.jpg);
background-repeat: repeat-x;
background-position: 95% 50%;
font-size: 12px;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(../images2/tester.jpg);
background-repeat: repeat-x;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal ul li a:hover
{
background-image: url(../images2/white.jpg);
background-repeat: repeat-x;
background-position: 95% 50%;
color: #000000;
}
ul.MenuBarHorizontal iframe
{
position: fixed;
z-index: 1010;
}
/* 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;
f\loat: left;
background-color: #FFF;

}
}

[edited by: SuzyUK at 5:10 pm (utc) on April 3, 2008]
[edit reason] sorry no personal links, see charter [/edit]

[4css]

In regards to this code:

{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background-color: #FFF;
}
} 

Is there supposed to be two closing brackets in here?

[bizerk784]

Yes its part of hack for IE.

@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE{
display: inline;
f\loat: left;
background-color: #FFF;}
}