Hi everyone, I thought that I would take it upon myself to make a menu out of just CSS and XHTML, no JavaScript involved. I have used nested links (something that I was concerned about but the W3C assures me that it's valid) so that I can show/hide the sub-menu's with appropiate pseudo-classes.
I have gotten the menu to work as intended in IE and Opera but Mozilla and Netscape refuse point blank to hide the span tag that the sub-menu links are in, even if I have style="display:none;" within the span tag.
Is there some trickery that I could use to get it to work in all browsers? I hope so.
There's just one other thing though, I do not want to use any code that is not completely valid according to the W3C validators, if this isn't possible then I'll just abandon making the menu.No bug. You cannot nest <A> tags. NS and Moz are just following the rules...
So why didn't the validator pick up on that? I mean, the DTD is XHTML 1.1 Strict so you would expect it to make a big deal of it wouldn't you?I doubt it can be done in IE.
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/menus/demo.html">http://www.meyerweb.com/eric/css/edge/menus/demo.html</a><!-- m -->
[J]onaI was going to try something like that but then I remembered - IE is crap - so I didn't.Originally posted by lavalamp
So why didn't the validator pick up on that? I mean, the DTD is XHTML 1.1 Strict so you would expect it to make a big deal of it wouldn't you? A validator is only another piece of fallible software.
At first I thought it was the DTD that was tripping Netscape (I was testing in 7.1), but it made no difference. Then I noticed a missing "#" in front of a color. That wasn't it, either. Then I tried a simple one:
<head>
<style type="text/css">
.menu a span {display: none}
.menu a:hover span {display: block}
</style>
</head>
<body>
<div class="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu 1
<span>
This should be hidden<br>
This should be hidden<br>
This should be hidden<br>
This should be hidden<br>
</span>
</a>
</div>
</body>which worked as expected. But it broke when I made "This should be hidden" into links. Then I remembered that you can't nest anchors.
Keep trying, though. I think it's a neat idea.well its crap because if you try to put your mouse in a dropdown then it disappears. and ie works fine so i dunno y every1 biatches about it.
I have gotten the menu to work as intended in IE and Opera but Mozilla and Netscape refuse point blank to hide the span tag that the sub-menu links are in, even if I have style="display:none;" within the span tag.
Is there some trickery that I could use to get it to work in all browsers? I hope so.
There's just one other thing though, I do not want to use any code that is not completely valid according to the W3C validators, if this isn't possible then I'll just abandon making the menu.No bug. You cannot nest <A> tags. NS and Moz are just following the rules...
So why didn't the validator pick up on that? I mean, the DTD is XHTML 1.1 Strict so you would expect it to make a big deal of it wouldn't you?I doubt it can be done in IE.<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/menus/demo.html">http://www.meyerweb.com/eric/css/edge/menus/demo.html</a><!-- m -->
[J]onaI was going to try something like that but then I remembered - IE is crap - so I didn't.Originally posted by lavalamp
So why didn't the validator pick up on that? I mean, the DTD is XHTML 1.1 Strict so you would expect it to make a big deal of it wouldn't you? A validator is only another piece of fallible software.
At first I thought it was the DTD that was tripping Netscape (I was testing in 7.1), but it made no difference. Then I noticed a missing "#" in front of a color. That wasn't it, either. Then I tried a simple one:
<head>
<style type="text/css">
.menu a span {display: none}
.menu a:hover span {display: block}
</style>
</head>
<body>
<div class="menu">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Menu 1
<span>
This should be hidden<br>
This should be hidden<br>
This should be hidden<br>
This should be hidden<br>
</span>
</a>
</div>
</body>which worked as expected. But it broke when I made "This should be hidden" into links. Then I remembered that you can't nest anchors.
Keep trying, though. I think it's a neat idea.well its crap because if you try to put your mouse in a dropdown then it disappears. and ie works fine so i dunno y every1 biatches about it.