On 24/11/2010 5:30 PM, Shortie Designs wrote:
Hi All - I'm very new at CSS only fly out menus - no javascript is my aim.
I've just created one and I'm having 2 issues in I.E. 7 (I can assume it's
the same in other IE browsers below and above).
IE8 is ok with this. It is IE7 an earlier that are buggy browsers but it
is not a bug that you seeing but rather a default margin (see below).
1. The fly out sub menu comes out but it disappears once you roll the
mouse over so you can't access the links
2. I can see the main menu through the fly out sub menu - which
doesn't look good. I've set backgrounds to be white but this doesn't seem to
help.
I'm not sure if I need an IE hack or if I have just missed something - do I
need to set a z index (i've tried but not very successfully)
No z-index required. No hacking required.
Here's a link to the page
http://dl.dropbox.com/u/9236012/css%20fly%20out/index.html
[snip
Sofia Woods
We have to give all browsers an area to hover that is within the top
level list items. This is since we can position the hidden sub-menus
differently. This is simply done by giving the links a right margin.
This controls the width of the space between the top level menu and
sub-menus.
ul#menu li a {
margin-right:10px;
}
Secondly we use a different way to hide the sub-menus without affecting
accessibility as well as zeroing out defaults. IE7 doesn't have default
padding but rather default margin.
ul#menu li ul {
position: absolute;
left: -10000px; /* add */
top: 0px;
/* display:none; delete */
padding: 0; /* zero out default padding-start */
margin: 0; /* zero out default margin-left for IE7- */
}
Lastly a way to reveal the sub-menu.
#menu li:hover ul{
/* display block; delete since we are not hiding by display: none */
left:100%; /* Change */
}
Should work in FF and IE7+. IE6 does not support hover of any element
other than links (ei. a:hover).
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
