Treehouse: Grow your CSS skills. Land your dream job.

New to JS

  • # December 24, 2009 at 12:03 pm

    Hi Im having trouble with this example of JS menu. can someone look over my code I can’t see what’s wrong.

    HTML file

    CSS FILE "style.css"

    /* The whole menu */
    #menu {
    position: absolute;

    /* each menu name */
    #menu li {
    float: left;
    list-style-type: none;
    padding-right: 20px;
    width: 100px;
    background-color: silver;

    /* The entire submenu */
    #menu li ul {
    background-color: silver;
    margin: 0px;
    padding: 0px;

    /* each submenu item */
    #menu li ul li {
    padding: 0px;
    margin: 0px;
    float: none;
    list-style-type: none;
    width: 80px;

    JAVASCRIPT FILE "dropdown.js"

    // global variables for timeout and for current menu
    var t=false, current;
    function SetupMenu(){
    if (!document.getElementsByTagName) return;
    for (i=0; i if (items[i].className != "menu") continue;
    // setup event handlers
    thelink=findChild(items[i],"A"); // try lowercase
    // is there a submenu?
    if (ul=findChild(items[i],"UL")) { // try lowercase & == instead of ="none";
    for (j=0; j ul.childNodes[j].onmouseover=ResetTimer;

    // find the first child object of a particular type
    function findChild(obj,tag){
    cn = obj.childNodes;
    for (k=0; k if (cn[k].nodeName==tag) return cn[k];
    return false;

    function ShowMenu(e){
    if (!e) var e = window.event;
    // which link was the mouse over?
    thislink = ( ? : e.srcElement;
    // hide the previous menu, if any
    if (current) HideMenu(current);
    // we want the LI, not the link
    thislink = thislink.parentNode;
    // find the submenu, if any
    ul = findChild(thislink,"UL"); // try lowercase
    if(!ul) return;"block";

    function HideMenu(thelink){
    // find the submenu, if any
    ul = findChild(thelink,"UL"); // try lowercase
    if (!ul) return;"none";

    function ResetTimer(){
    if (t) window.clearTimeout(t);

    function StartTimer(){
    t = window.setTimeout("HideMenu(current)",200);

    // set up the menu when the page loads

# December 24, 2009 at 12:06 pm

forgot to mention you’ll see comments like "lowercase" etc. that’s where I was trying some changes to fix, but nope

# December 24, 2009 at 7:56 pm

Is is posible for you to start using jQuery? It’s way more easy and efficient way to create these kind of effects on your website.

# December 24, 2009 at 9:46 pm

the thought did cross my mind, but the documentation is so obtrude. I’ll look into it. thx

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.