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

[sycorax27]

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;}

[MidiMagic]

You need the hover attribute applied to the entire menu area once it opens, not just its start tab.

[vik85]

hey can you show me how to do ? i didn't understand your ans .can you give me some idea bye code.

[almostbob]

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