css menu in ie7 : a:hover behaviour only on text not on the whole box

Hello,

i would appreciate any help with css menu in ie7.
I have developed the pure css menu, what is working fine with ie6 and ff, opera as well,
but after comming the new ie7 i have realised, that the menu is simulating the a:hover behaviour without any htc files etc. But its quite strange. The menu is multilevel menu, and after moving out from the text in the menu, the other levels are very fast disappearing ... so you cannot reach the next level because of this ... on the others browsers its working fine.

Link to the testing page : http://www-1.sysnet.cz/Test/web-navx.nsf/index.html?OpenPage

If you could write me how to change the menu.css for working properly on ie7 as well, thanx!

The css code of the menu :

/**************** menu coding *****************/
#menu {
width: 200px;
background: #ffeeee;
z-index: 9999;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;

}

#menu a, #menu h2 {
display: block;
border:1px solid #888888;
border-width:0px 1px 1px 0px;
margin: 0;
padding: 5px 3px;

}

#menu h2 {
display: none;
}

#menu a {
color: #FFFFFF;
background: #B2B2B2;
padding-left:5px;
text-decoration: none;
font-size:0.6em;
font-family:Arial Black;
text-transform:uppercase;
}

#menu a:hover {
color: #FFFFFF;
background: #99cc00;
}

#menu li {
position: relative;
}

#menu ul ul{
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ,
div#menu ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;
border:1px solid #777777;
border-width:1px 0px 0px 1px;
margin-left:-1px;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Code (markup):

 

It works and with the same behaviour in FF, Opera and IE7 for me... however, it fails on IE6 or lower. None of the hovers work and there is a space between each menu item.

 

hello,

for me its working on the ie6, but can you reach all items of the menus with slower speed and getting out of the text of the boxes without losing the other boxes ?

 

On each browser it has worked on, the boxes disappear immediately on mouse over. Perhaps what you are noticing is due to lag.

 

Try adding min-height: 1% to your nested lists to force hasLayout.