Sub-menus not running

Forum Moderators: not2easy

Message Too Old, No Replies

Sub-menus not running

Code included

Matt_G

10:52 am on May 6, 2009 (gmt 0)

I'm working on a CSS/Javascript page with a menu except whenever I do browser tests, the submenus won't come up.

Code sample:

<li class="one"><a href="#">Progress reports</a>
<ul>
      <li class="sub"><a href="#">Intro</a></li>
      <li class="sub"><a href="#">Timeline</a></li>
      <li class="sub"><a href="#">New builds</a></li>
      <li class="sub"><a href="#">New tests</a></li>
      <li class="sub"><a href="#">Oops</a></li>
    </ul></li>

dreamcatcher

3:09 pm on May 6, 2009 (gmt 0)

I don`t think anyone will be able to help with just that code snippet Matt. If its not appearing sounds like a javascript issue? The above is standard HTML/CSS.

Does this happen in a specific browser? Do you js errors? In Firefox, view the error console. Or in IE install the js script debugger. Or better still use Firebug.

Or is it a CSS issue? Hard to say really.

rocknbil

3:22 pm on May 6, 2009 (gmt 0)

What's the JS and CSS look like?

I'm presuming "sub" is set to display none and you set it to display:block on mouseover via JS (or something like that.) You don't need to style each LI, create a selector to style the ul li.

The problem might be with the fact that Javascript does not "know" the status of an element's display unless it's applied with inline CSS. Discussed here [webmasterworld.com] and here [webmasterworld.com].


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  
"http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd"> 
<!-- doctype on one line --> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<style type="text/css"> 
.sub { display: none; font-size: 85%; } 
</style> 
<script type="text/javascript"> 
function attachBehaviors() { 
 // make JS "aware" of the display status of these elements 
 document.getElementById('sub-one').style.display='none'; 
 document.getElementById('sub-two').style.display='none'; 
 document.getElementById('one').onclick=function() { return showHide('sub-one'); }; 
 document.getElementById('two').onclick=function() { return showHide('sub-two'); }; 
} 
function showHide(menu_id) { 
 var obj = document.getElementById(menu_id); 
 obj.style.display=(obj.style.display=='none')?'block':'none'; 
 return false; 
} 
window.onload=function () {  
 if (document.getElementById) { attachBehaviors(); } 
}; 
</script> 
</head> 
<body> 
<ul id="main-menu"> 
 <li class="one"><a id="one" href="#">Progress reports</a> 
 <ul id="sub-one" class="sub"> 
 <li><a href="#">Intro</a></li> 
 <li><a href="#">Timeline</a></li> 
 <li><a href="#">New builds</a></li> 
 <li><a href="#">New tests</a></li> 
 <li><a href="#">Oops</a></li> 
 </ul> 
 </li> 
 <li class="two"><a id="two" href="#">Grades</a> 
 <ul id="sub-two" class="sub"> 
 <li><a href="#">Stellar</a></li> 
 <li><a href="#">Just OK</a></li> 
 <li><a href="#">Passing</a></li> 
 <li><a href="#">Don't quit day job</a></li> 
 </ul> 
 </li> 
</ul> 
</body> 
</html>