Welcome to WebmasterWorld Guest from 18.212.92.235

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Multi level Drop Down Menu

only works properly in IE7?

     
5:28 pm on Jan 24, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 1, 2004
posts:68
votes: 0


I have the below code that is a pure CSS dropdown menu system.

I've taken it from CSSPlay and added another level so it has the top level nav, then a dropdown, then 3 more flyouts.

Try it by copying and pasting the below into a page.

Problem is it works fine in IE 7 of all browsers but Firefox and Safari there is a level missing and in IE 6 two levels don't show.

I'm stuck, help appreciated!

Suzy says, Please Note, I've changed this code, it still does exhibit the problems described, but it also has been examplified to help show the whys and nesting issues, explained in a later post


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Page</title>
</head>
<style type="text/css">
/* style the outer div to give it width */
.menu {
width:750px;
font-size:0.85em;
padding-bottom:200px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:139px;
height:30px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#758279;
padding-left:10px;
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul {
visibility:visible;
}
</style>
<body>
<div class="menu">
<ul>
<li><a href="#">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">blank - top</a></li>
<li><a class="drop" href="#">1. Menu<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">2. Menu</a>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">3. Menu</a></li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">4. Menu</a></li>
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2k</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">blank - bottom</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

PS I've wraped the code tags around the above but its not working:(

[edited by: SuzyUK at 1:04 pm (utc) on Jan. 26, 2007]
[edit reason] fix formatting and reduce code.. [/edit]

5:36 pm on Jan 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


I'm pretty surprised it doesn't work. Stu Nicholls is very good about testing all his stuff against a gazillion browsers.

I don't have time to examine it now. Maybe I'll be able to get back to it later.

5:43 pm on Jan 24, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 1, 2004
posts:68
votes: 0


well his version works fine, its just my extra level that is refusing to show in anything but IE 7
11:33 pm on Jan 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts:1526
votes: 0


Well, the first thing I notice is that you have some kind of HTML nesting error. I'll see if I can figure it out.

Hmm...maybe not. I forgot how wacky his code can get. He has a gazillion conditionals in there.

Ohh...Now I get it. He's breaking the rules, and I'll bet you didn't break them the same way when you added a level.

I still haven't figured out exactly where the problem is, but five will get you ten that the code you added for the last level either closes or leaves open a <ul> that should be the other way around.

Can you tell me what you expect to see, and what is not happening? I seem to be seeing 5 levels on Mac FF.

9:56 am on Jan 25, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 1, 2004
posts:68
votes: 0



When I expecting to see and seeing in IE 7 only is:

Hover on DEMOS then
Hover on 1.Menu and 2.Menu Appears
Hover on 2.Menu and 3.Menu Appears
Hover on 3.Menu and 4.Menu Appears

However in Safari, FF 2.01 (Mac and PC) 4.Menu does not appear when hovering on 3. Menu

and....
In IE 6 3.Menu does not appear when hovering on 2.Menu

2:29 pm on Jan 26, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi urbanmac, sorry for the edit sweep on the intial post, it was just way too much code. It still is really but I'd like to take the opportunity to clear up, not only your issue but a few misconceptions about this particular style of code that are around at the minute ;)

- Note I haven't touched the CSS in your original post at all I only reduced the HTML from what you had to smaller, less options and with reference points (gave the drops numbers)

csmarshall, while I appreciate your enthusiasm for Stu's work (I'm sure he does too ;)), you must understand that what he does is explore possibilities by PLAYING, he doesn't test in "gazillions" of browsers he explores what *should* be possible using Pure CSS, he lets us know when something just wont work in a particular browser and sometimes he finds workarounds, sometimes he doesn't even bother looking because the code is meant to be for fun only.

e.g. with this code why on earth would you want to start nesting tables just to get something to work hehe ;)

He has a very clear warning on his site about these particular menus (the ones which nest links inside tables inside links for IE6 and below):


REMEMBER : THIS IS JUST FOR FUN ;O)

As you will see from the markup this requires two menus to be set up, one for IE an the other for non-IE browsers.

It also requires two different css styles.

I wholeheartedly agree that his site is very interesting, but the fun (note not authority!) in his site is taking the code and learning from it ;) Which is what I'm about to do, because I have learned something about conditional comments [webmasterworld.com] from this particular style of coding.

urbanmac sorry about that OT bit, but I didn't want you to get the feeling that this code should "just work" with a copy/paste - even when we fix it I think it would be better if you understood what it was doing then you'll be able to add levels to your hearts content ;)

He's breaking the rules, and I'll bet you didn't break them the same way when you added a level.

Actually he's not breaking the important rules, but you did in your code - it is a simple nesting error that is the reason for the last drop not showing.

if you look at the list choice 2. menu

<li><a href="#">2. Menu</a> 
you will see that there is no closing </li> after it, the closing <li> comes just before the second choice in that list.
</li>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2k</a></li>

ie, choices 3 (and 4) are now nested inside a single <li> element, this is the way it should be. in your code when you added a level you left the closing <li> after 3. menu

<li><a href="#">3. Menu</a></li>
which is where it would've been in the original copied code, but that was becasue the level was closed there. If you want to nest a further level inside this you need to do it inside the <li> element so you need to move that closing </li> so it is correctly wrapping level 4, change to

</li>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>

That should sort the nest and get FF etc. working properly

the second part, (IE6 and below only showing 2 x Levels) is related to those complex conditional comments in this particular code, The IE6 version of the code relies on not closing the </a> where you should but instead leaving them open and then also nesting a table inside them, which Stu explains is illegal, but IE just works and because the code is hidden in conditional comments it'll validate ;) He does this so the code will work using

a:hover
because IE 6 and below does not support :hover on other elements like <li> (IE7 does now which explains why he also want IE7 to see the closing </a> in the right place)

you need to understand when and why Stu's closing the <a> elements for the two different menus

for ONLY IE7 and Good browsers
using

<!--[if IE 7]><!--></a><!--<![endif]--> 

he closes it right where it should be, before the nested <ul> is opened

(actually, slightly OT, and would be glad if anyone knows - I don't know why he uses that specific conditional code - according my CC research recently I would write the code as:

<![if IE 7]></a><![endif]>

but perhaps Stu found a reason this didn't work - anyone know?)

anyway whichever way it's written this is done so the <a> stays open for IE6 and below so the table can then be nested inside it,
using this code:

<!--[if lte IE 6]><table><tr><td><![endif]-->

then when the table is opened the correct nested <ul> code can be put inside it

but then when he closes the table for IE6 and below he also has to close that open <a> element for IE6 and below and
uses this code:

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

urbanmac, you simply need to check your closing </a>'s and make sure that you aren't closing them too early for IE6 and below, e.g.

<li><a href="#">2. Menu</a>
<!--[if lte IE 6]><table><tr><td><![endif]-->

in that you're closing the </a> for all browsers including IE6 and below so the a:hover rules are not activating the nested links because they are now not nested, You need to see when a link should be staying open for IE6 and do it using the first piece of code above.

It's a complex way to do this and can get quite wieldy the bigger the menu, also it takes advantage of the fact the IE will let you nest links inside links (forbidden) IF the nested links are also inside a table :o

Anyway I hope you don't mind the lond explantion but due to the frequency of questions about this experimental code I thought I'd post a full explanation which can be referred to if necessary

This code should only be used by those that are really, really, really keen to use PURE CSS as opposed to a simpler scripting solution.

Suzy

2:58 pm on Jan 26, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


Wow. Now that is an authoritative response that beats anything I would have written hands down.

SuzyUK is (of course) correct.

Stu Nicholls' stuff is amazing, but it is also "on the bleeding edge." That's a scary place to live. I almost never use his stuff because I live in a pretty conservative world that usually has to support down to quirky old IE5.

It's also, as you are finding out, a complete b**ch to debug.

Thanks for the dissertation there, Suzy.

Much as I may find Mr. Nicholls' acrobatics amazing, I think that I'll refrain from suggesting that people use them in everyday coding.

4:35 pm on Jan 26, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 1, 2004
posts:68
votes: 0


I'll second that WOW

thanks you for that explanation, that is fantastic I really appreciate it.

It now makes way more sense and works....I've now inserted dynamic code and the menus build from a database - :D

BIG THANK YOU

8:46 am on Jan 27, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


You're welcome glad if it helped..

Just want to follow up for posterity, my question has been answered

for ONLY IE7 and Good browsers
using
<!--[if IE 7]><!--></a><!--<![endif]-->

he closes it right where it should be, before the nested
<ul>
is opened

(actually, slightly OT, and would be glad if anyone knows - I don't know why he uses that specific conditional code - according my CC research recently I would write the code as:

<![if IE 7]></a><![endif]>

but perhaps Stu found a reason this didn't work - anyone know?)

both are downlevel-revealed comments
both work,
- my way is the textbook way but DOESN'T validate
- Stu discovered his by necessity, as is a requirement for his experiments - IT DOES validate

Suzy

added
reference link for official explanation:
Microsoft on Validation [msdn2.microsoft.com]

[edited by: SuzyUK at 6:56 am (utc) on Dec. 27, 2007]