Issues altering CSS with JavaScript

Question

I'm building a dropdown menu for a project I'm working on, and I've come across some trouble. It is built so that the width and the style.left of each submenu is set by a JavaScript function that is called when the root-level menu items are hovered. When I hover these menu items it looks like this:

The submenu is clearly off by quite some pixels to the left. If I don't alter the style.left of the submenu I get the following instead:

Here the alignment is correct. The fault has occured in both Mozilla Firefox and Google Chrome for both Windows 7 and Linux, so it's not a platform related fault.

Here is the code that produces the error:

menu.js

function show_sub_menu(cath){
    var menu_item = document.getElementById(cath)    //cath is an integer passed to the function
    var m_width = Math.floor(window.innerWidth*0.7*0.2);  //Menu is 70% of window, each item is 20% of menu
    menu_item.style.left = cath*m_width;  //Set the style.left dynamically depending on what menu item is to be displayed
                                          //This last line of code produces the error
}

menu.css

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:20%;
    top:30px;
}

#menu div a{
    position:relative;
    display:block;
    padding:5px;
}

menu.htm

<div id=m_wrapper>
    <ul id=menu>
        <li onMouseOver=show_sub_menu('0')>Item 1</li>
            <div id=0 onMouseOver=show_sub_menu('0')>
                <a href=#>Item 1.1</a>
                <a href=#>Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

I this seems very illogical, since m_width in the .js is, for my screen settings, 235px and m_width*cath is 0. I am fairly new with JavaScript, so help would be very appreciated!

Answer 1

First, you have your list-item closing early, and an ID that shouldn't start with a digit. So let's clean that up:

<div id="m_wrapper">
    <ul id="menu">
        <li onMouseOver="show_sub_menu('0');">
            Item 1
            <div id="s0" onMouseOver="show_sub_menu('0');">
                <a href="#">Item 1.1</a>
                <a href="#">Item 1.2</a>
            </div>
        </li>
    </ul>
</div>

Next let's check out your CSS. Since we want to position your submenus relative to the main menu items, let's put position:relative; on the list-item itself to create a space from which we can position other stuff.

Now that we have a context where the submenu is aligned based on the top-left corner of your list-item, what we really need is for that menu to appear 30 pixels down from that corner - no left or right adjustment needed.

#m_wrapper{
    position:relative;
    width:100%;
}

#menu{
    position:relative;
    width:70%;
}

#menu li{
    position:relative;
    width:20%;
    float:left;
}

#menu div{
    position:absolute;
    width:100%;
    top:30px;
    left:0;
}

#menu div a{
    display:block;
    padding:5px;
}

From here, your sub-menu should be positioned where you need it, but it's shown all the time. We'll take care of that by adding display:none; to #menu div and modifying the JavaScript to change display instead:

function show_sub_menu(cath){
    var menu_item = document.getElementById("s"+cath);
    menu_item.style.display = "block";
}

That should make your menu appear where and when you need it. I'll leave the disappearing act to you.