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.
Every fight is a food fight when you’re a cannibal.
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:
Code:
<head>
<style type="text/css">
.menu a span {display: none}
.menu a:hover span {display: block}
</style>
</head>
<body>
<div class="menu">
<a href="#">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.
CSS Menu and Mozilla bug!!!
Reply With Quote
Bookmarks