Member Avatar for 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 :

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;}
  • 4 Contributors
  • 3 Replies
  • 226 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short summary: as reported, the submenu disappears when the mouse leaves the visible text in IE7. The two useful hints already posted ( — “apply hover to the whole area” and ’s use of LI hover) are on the right track. In IE7 this usually isn’t a CSS selector bug so much as a tiny gap or layout quirk: the mouse briefly leaves the parent’s active box (because of borders, positioning rounding or missing hasLayout), so the hover state is lost and the child UL is hidden.

Quick way to find the gap

  • Temporarily draw outlines around the menu elements so you can see exactly where the browser thinks each box is. That will show any 1px gap between the parent item and the submenu.
/* debug only — add, test, then remove */
div#menu * { outline: 1px dashed #f00 !important; background: rgba(255,0,0,0.02); }

Practical fixes that avoid the flicker (apply only if the debug shows a gap)

  • Give the parent LI and the anchor layout in IE7 (force hasLayout).
  • Nudge the child UL so it overlaps the parent edge by 1px instead of sitting exactly at 100%.
  • Make the anchor’s active area consistent with an explicit line-height/height so there’s no unexpected shrink-wrap.

Example IE7-only patch (use conditional comments in your page):

<!--[if IE 7]>
<style>
/* force hasLayout and remove any tiny gap */
#menu li { zoom:1; }          /* fixes several IE7 hover/paint issues */
#menu ul ul { left: 99%; }    /* nudge child menu into a 1px overlap */
#menu a { line-height: 1.8em; }/* make the clickable area predictable */
</style>
<![endif]-->

Notes and cautions: overlapping by a pixel or using zoom:1 is a pragmatic, widely used fix for IE7 hover flicker. After confirming the fix visually, remove the debug outline rules. For keyboard accessibility, consider adding focus styles or a tiny script to toggle classes so keyboard users can open submenus as well.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

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

Member Avatar for vik85

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

Member Avatar for almostbob 
#menu a:hover { color:#FFFFFF; background:#99cc00; }
#menu li { position: relative; }
#menu li:hover { color:#FFFFFF; background:#99cc00; position:relative; }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.