Re: [WSG] Submenu bug in FireFox...

[Mordechai Peller]

Mark Harwood <WebMail> wrote:
Right, im playing with an "Elastic" Menu system built apon Nested <ul>&<li>'s
Now i know this would be frowned apon probelry! But im open to a better way in
doing it?
 

Semantically, a nested ul is correct.
Anyway, back to my bug! On FireFox when you click on the Nav and it opens the
SubNav it Throws the Parents <li>
ul {float : left;} means ALL UL's are floated left, including the nested 
ul. The nested ul is floated in it's parent li. The solution:

ul ul {float : none;}
Items out to the side! instead of dropping them down like it does in IE!
 

Sorry, but this may come as a surprise:  IE is getting it wrong.
Now as im doing this in my new "Every thing in EM's" mode im finding it a little
tricky to work out!
 

I find initially setting the body's font size to a percent, and then use 
em's. For everything else, it's either percent, em's, or px's (that's my 
usual order of preference).

Here's a way using JavaScript which works well. If JS is disabled it 
will still work by a trip to the server.

.closed ul {display : none;}
<script type="text/javascript">
function clicked(elem) {
 if (elem.parentNode.className == "closed") {
   elem.parentNode.className = "open";
 } else{
   elem.parentNode.className = "closed";
 }
 return false;
}
</script>
----
<ul>
 <li class="open"><a href="..." onclick="clicked(this)">link1</a>
   <ul>
     <li><a href="...">sub1.1</a></li>
     <li><a href="...">sub1.2</a></li>
   </ul>
 </li>
 <li class="closed"><a href="..." onclick="clicked(this)">link2</a>
   <ul>
     <li><a href="...">sub2.1</a></li>
     <li><a href="...">sub2.2</a></li>
   </ul>
 </li>
</ul>
If JS is disabled, the links with the onclick work and it's up to the 
server to set what's "open" and what's "closed". It's better to add the 
onclick's via external JS to fully separate behavior and presentation.
*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************