1,105,363 Community Members

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

Member Avatar
sycorax27
Newbie Poster
1 post since Jun 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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;}
Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

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

Member Avatar
vik85
Newbie Poster
7 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
almostbob
Nearly a Senior Poster
3,389 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 
#menu a:hover { color:#FFFFFF; background:#99cc00; }
#menu li { position: relative; }
#menu li:hover { color:#FFFFFF; background:#99cc00; position:relative; }
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article