I have been trying to create a vertical pop out menu for the last while. I thought i had it complete but i have now noticed a slight problem in IE6. Can someone please please try and help me with this. Please view the page here Error - you cannot move your mouse over any of the sub menus in IE6 (here is the tutorial) Here is my code: CSS /* CSS Popout menuv */ /* Fix IE. Hide from IE Mac \*/ * html #menuv ul li{float:left;height:1%;} * html #menuv ul li a{height:1%;} /* End */ #menuv /* position, size, and font of menu */ { position:absolute; margin:0px 0px 0px 0px; z-index: 10; width: 14em; /* [1] width of menu item (i.e., box) */ text-align: center; font-size: 0.9em; font-family: helvetica, arial, geneva, sans-serif; } #menuv a { width: 100%; display:block; padding:4px 0px 4px 0px; border: 1px solid #ffffff; /* adds bottom border */ white-space:nowrap; } #menuv a, #menuv a:visited /* all menus at rest */ { color:#ffffff; text-decoration:none; /* removes underlines from links */ } #menuv a.parent /* attaches parent-arrow on all parents */ { background-image: url(../images/arrow.gif); background-position: right center; background-repeat: no-repeat; } #menuv a.parent:hover /* attaches parent-arrow on all parents - hover */ { background-image: url(../images/arrow_o.gif); background-position: right center; background-repeat: no-repeat; } #menuv a:hover /* all menus on mouse-over */ { color:#C8DE72; } #menuv li { list-style-type:none; /* removes bullets */ padding:3px 3px 3px 3px; } #menuv ul li { position:relative; } #menuv li ul { position: absolute; top: 0; left: 14em; /* distance from left menu (this should be the same as width value in #menuv [1]) above */ display: none; } div#menuv ul, #menuv ul ul, div#menuv ul ul ul { margin:0; /* keeps the menu parts together */ padding:0; width: 14em; /* width of sub menus (this should be the same as width value in #menuv [1]) above */ } div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul { display: none; } div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul { display: block; } HTML: HTML <div id="menuv-container"> <div id="menuv"> <ul> <li><a href="#" class="parent">1</a> <ul> <li><a href="#">1:2</a> <ul> <li><a href="#">1:2:3</a></li> <li><a href="#">1:2:3</a></li> </ul> </li> <li><a href="#">1:2</a></li> </ul> </li> <li><a href="#" class="parent">Eco Friendly</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> <li><a href="#">Clocks</a></li> <li><a href="#">Clocks</a></li> <li><a href="#">Clocks</a></li> <li><a href="#">Clocks</a></li> <li><a href="#">Clocks</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> <li><a href="#" class="parent">Watches & Clocks</a> <ul> <li><a href="#">Watches</a></li> <li><a href="#">Clocks</a></li> </ul> </li> </ul> </div> <!-- end the menuv-container div --> </div> <!-- end the menuv div --> HTML: thanks in advance`
Try this menu layout instead. http://www.twinhelix.com/dhtml/fsmenu/ See the demo: http://www.twinhelix.com/dhtml/fsmenu/demo/
Thanks but i want to try create a menu without JS, thanks for your help though I have figured my problem out also... you need to have a background color set on the li for it to work in IE6, thanks again
^ not exactly. The thing about IE6 not working until you change something like colour or background colour is part of the Haslayout thing. Changing certain properties sets it off. So what if you don't want to change a colour? How to trigger? This has worked for me in getting IE6 to hover over many things: whatever a:hover { visibility: visible; } visible is the default for visibility as far as I know, but explicitly saying that will put haslayout on the :hover (you'd think you only need Haslayout on actual elements right? But no, pseudo-elements like :hover can ALSO has layout). Looking at the CSS in that menu you've chosen, it's really not optimised. This was written by someone who knows some CSS but isn't really really familiar with it. It's got absolute positioning for more than needed (the submenus are the only things that need abso-po) AND it's using the display: none, display: block trick which is one reason why you needed extra help triggering haslayout on the :hover. Since screen readers surfing through a CSS-enabled browser like IE6 or 7 will honour display: none, the text of the submenus will never appear to them (their reader will never read the submenus) and how likely are the blind to be hovering over stuff with a mouse to change that? Not likely. Plus, changing display values somehow makes extra work for IE. A much more recommended method is this: the subs normally { position: absolute; left: -999em; other stuff; } then on :hover { left: 0; } If something is sitting waaaay off to the left, screenr readers will read the whole menu, while it looks missing for visual visitors and appears when the menu's hovered over. You can also shorten stuff like this (if you want, doesn't affect menu performance): #menuv a.parent /* attaches parent-arrow on all parents */ { background: url(../images/arrow.gif) right center no-repeat; } Code (markup): As an example. Makes the code look cleaner and is easier to read/maintain. You also said you didn't want to use JS for the menu. The csshover.htc is also JS... the only difference is that it sits on the server where it belongs instead of polluting the HTML with its scripty ways. IE6 with Javascript disabled I'm 99% sure can't use the whatever:hover code, and won't hover. For this and other reasons, you should think about having the main menu buttons go to a page with all the sub links, just in case someone can't get the drop-down to show. It's great for googliebots too since it's pretty much like a site-map. ++ accessibility!
Wow... thanks for the great reply and feedback "Stomme poes" I am very interested in what you have said. My first step after i get the menu to work 100% is to clean the code up similar to what you have mentioned. I hate using em also so is it ok to use px? I have tried to implement the following code: whatever a:hover { visibility: visible; } but i can't seem to get it working... where exactly would you recommend putting this code in my CSS (provided above or in the updated link below) I was planning on as you said (you should think about having the main menu buttons go to a page with all the sub links) putting all the menus and sub menus linking to different pages but i think the left div will look very bare as if we take the first item in the menu - Watches & Clocks - if someone clicks into this then they will be brought to a page with: Watches Clocks and that's it - how would they navigate back and forward ( i would have to put a mini site/link map at the top of the menu to show them where they are) but i still think the left hand div would look very bare. I'm extremely interested in getting the menu to work without a background color, so if you had time could you kindly show me where i would need to put the code exactly... thanks updated link thanks again for your help, much appreciated...
I would think here: div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul { display: block; visibility: visible; } Code (markup): Though you may need to have it on other hovers... wherever you've found background-color to work, you could replace with visibility: visible. With IE7, the trick is that usually a different haslayout trigger is needed on each appearance of something... so Suzy from Webmasterworld discovered that for IE7 you can have a special, seperate section like this: #menuv li:hover { position: relative; z-index: 1; } Code (markup): Which adds a trigger (pos: rel) in a safe place so long as you don't have it on any of the other li's, and adds a z-index for good luck (affects seen on deeper menus). For the clickie page, you could do two things that I can think of: First, you've got an href for each top menu item (parent, Eco Friendly). You could have it that if clicked, goes to a single page with a list of links (otherwise called a sitemap). People who can get the hover to work generally don't click on the top menu items, only the subs. What I did with a menu is had a "landing page" for each part. For an insurance site, there's "living" with subs "renters ins", "building ins", and "extra" (translating from Dutch : ), and then "personal" with subs "accident ins", "juridische help", and "family ins" for instance. If someone can't get "Living" or "Personal" to drop down, they can click on either of those, and Living goes to a page with the same title, a further description of what we offer in that area, and sub-sections (including links) describing each of the subs. So for your, Eco Friendly would go to a page called Eco Friendly with a short paragraph about what's so eco-friendly about your products, and then a subsection about clocks with a link to the specific Clocks page, and another subsection with watches. Mm, example I'll use my site since it's still not online really: http://stommepoes.nl/Guis/GPPO/gppo.html I don't think any of the links work, and I don't have the hover .htc on my server, so no drop-downs show in IE6 (they will when on the work server). I think you can click on Wonen though, otherwise http://stommepoes.nl/Guis/GPPO/wonen.html and on that page you can see that each of the subs from Wonen are listed and linked on the wonen.html page. If you just don't have that much extra BS text to add, then go with the Site Map.
stomme has it.. though some bits are muddled up I think Stomme - visibility: visible; does not set hasLayout=true as far i'm aware.. using the visibility method of showing/hiding is simply recommended over the display method, whenever possible because of accessibility but also because it's the 'display none/block' method which specifically sets off a lot of IE's hasLayout errors but as we found out before using the 'absolute left' method of hiding (especially in drop down menus) is even better, because the visibility method doesn't remove the drops from the flow. anyhow yes putting a value in under li:hover is a good idea.. IE doesn't always like (not even with links) to apply extended hover rules e.g. a:hover span or li:hover ul if there isn't a a simple :hover rule in place first.. because, in drop menus position: relative; is usually on the li anyway for positioning, I just move it onto the hover as that's the place it's needed for positioning the drops. as for the code.. try this - bits added, bits moved, changed to pixels for you, body {background: #777;} #menuv /* position, size, and font of menu */ { position:absolute; margin:0; z-index: 10; width: 200px; /* [1] width of menu item (i.e., box) */ text-align: center; font-size: 0.9em; font-family: helvetica, arial, geneva, sans-serif; } #menuv ul { list-style:none; /* removes bullets */ padding: 0; margin: 0; } #menuv li { padding: 3px 0; /* creates gaps betwwen the links */ float: left; /* incorporate hack will do no harm because of width below */ width: 100%; /* same as menu */ } #menuv ul li:hover { /* extra rule for hover so IE honors the extended li:hover ul rules better */ position: relative; z-index: 1; } #menuv a { width: 100%; display:block; padding: 4px 0px; border: 1px solid #fff; /* adds bottom border */ white-space:nowrap; background: #777; /* same as page background color? */ } #menuv a, #menuv a:visited /* all menus at rest */ { color:#fff; text-decoration:none; /* removes underlines from links */ } #menuv a:hover /* all menus on mouse-over */ { color:#C8DE72; } #menuv a.parent /* attaches parent-arrow on all parents */ { background-image: url(../images/arrow.gif); background-position: right center; background-repeat: no-repeat; } #menuv a.parent:hover /* attaches parent-arrow on all parents - hover */ { background-image: url(../images/arrow_o.gif); background-position: right center; background-repeat: no-repeat; } /* drop lists */ #menuv li ul { position: absolute; top: 0; /*left: 14em; /* distance from left menu (this should be the same as width value in #menuv [1]) above */ left: -9999em; /* hide off page */ } #menuv ul, #menuv ul ul, #menuv ul ul ul { margin:0; /* keeps the menu parts together */ padding:0; width: 200px; /* width of sub menus (this should be the same as width value in #menuv [1]) above */ } #menuv ul ul, #menuv ul ul ul, #menuv ul li:hover ul ul, #menuv ul li:hover ul ul ul { left: -9999px; /* hide - instead of disply: none; */ } #menuv ul li:hover ul, #menuv ul ul li:hover ul, #menuv ul ul ul li:hover ul { left: 202px; /* has to be a close as possible or even overlap to maintain hover this is width of manu + borders */ } Code (markup):
I'm not 100% sure it sets Haslayout but if you even make a fake image map with spans appearing on :hover, you'll see some or all of them won't show on IE6 (using the left: -999em, left: 0 method) unless you do something like visibility: visible on the hover (or change background colour, or set font to bold, or whatever). I first ran into this on fake CSS tooltips where I had replaced a Javascript which showed a little text on :hover. IE6 didn't show anything until Paul O'Brien said "add label a:hover { visibility: visible; } on it's own line" and it worked... so I've always figured that it was indeed Haslayout. Oh I almost missed this part: You can, so long as you make your font big enough. IE won't rezise fonts set in pixels (thas is might be the smarter thing to do) while Mozilla and Safari will enlarge it. I use em but I do this knowing it will break my menu when someone enlarges the page AND the inheritance is a bitch... cause I've used em's for both the fonts and the sizes of the blocks, so sometimes the submenus get strange sizes as every element thinks it's parent was at 100%... When I am forced to set something in px, I try for 16px to account for any low dpi machines out there, which would possibly render 16px as 12px (and thus if my code said 12px it could render as 9px or worse... unreadable).
ahh.. I see, no it's not setting hasLayout, but it is doing the same for the "tooltip/image map" as I suggest for li:hover.. .. I did say that IE doesn't always like dealing with an extended hover rule unless it had a simple :hover set first - in the case of the spans technique (as opposed to a drop down where the :hover is on the li ) the rules need an a:hover before they'll deal properly with an a:hover span {}.. In the case of the CSS span popups technique (the popups didn't pop) - any default property that is not used in the a {} rule can be used, or you change any default property slightly.. it doesn't have to be visibility that's used .. and color is an exception related but may be slightly outdated as I wrote it about 6 years ago..
Lots of things seem to work and others not. Visibility:visible makes no noticable changes yet make IE6 work-- prolly why it's the default answer given by all the bearded, cloaked and hooded gurus out there. I went for so long without running into the problem because I have this thing for making text bold on :hover. Personal preference I guess. Bold apparently did the job for 6 and I didn't ever notice : )
Guys... thanks a million for your replies... however both of you are gone way over my head with your lingo and expertise... lol I have tried the visibility trick but the menu does and does not work. IE6 seems to display the sub menus on hover but then it looses them sometimes as you move the mouse across the tab (strange but true). It doesn't seem to be working 100%. I am going to leave the bg on the sub menus as it is very hard to read the text in the menus while the sub menus are transparent. I have one little question for the two of you... when you active a sub menu, notice that FF seems to have less right-padding than IE6 on each of the menu tabs. Try this out on the first menu tab "Watches & Clocks" as it has two sub menus. The distance between 1 | 1:2 | 1:3 is the same when you open them all out in each browser, however FF seems to have less right-padding until you actually activate the sub menu... sorry if all this sounds a little confusing, i'm not explaining it very well, but try it out yourself and hopefully you can see it. Thanks again...